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