Hi Sadanobu,
In order to achieve the mentioned use-case, you will have to define/override some of the predefined CSS desktop/landscape class definition with the below mentioned CSS rules.
Define in the below mentioned CSS rules in the Menu block StyleSheet section.
CSS Snippet
.desktop .menu-icon,
.landscape .menu-icon {
display: inline-flex !important;
}
.desktop .app-menu-links,
.landscape .app-menu-links {
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-top: var(--space-s);
}
.desktop .header .ThemeGrid_Container {
padding: var(--space-none) var(--space-m);
}
.desktop .app-menu-content,
.landscape .app-menu-content {
background-color: var(--color-neutral-0);
flex-direction: column;
height: 100%;
left: calc(-1 * var(--side-menu-size));
position: fixed;
top: 0;
transform: translateX(0) translateZ(0);
transition: transform 130ms ease-in;
width: var(--side-menu-size);
will-change: transform;
z-index: 105;
}
.desktop .menu-visible .app-menu-content,
.landscape .menu-visible .app-menu-content {
transform: translateX(var(--side-menu-size)) translateZ(0);
transition: transform 330ms ease-out;
}
.desktop .header-logo,
.landscape .header-logo {
padding: var(--space-none) var(--space-m);
height: var(--header-size);
}
.desktop .menu-visible .app-menu-overlay {
opacity: 1;
transition: opacity 330ms ease-out;
pointer-events: auto;
}
.desktop .app-menu-overlay {
display: unset !important;
}
.desktop .app-login-info,
.landscape .app-login-info {
padding: var(--space-base) var(--space-m);
}
.desktop .header-content > [data-block*="ApplicationTitle"] .application-name {
display: flex !important;
}
See this sample app
Hope this helps you!
Kind regards,
Benjith Sam