Show icons for Navigation with toggle-mode slide over content

2
Hi Community,  basically what I want to achieve is a navigation menu with icons always visible, and after clicking the sidebar-toggle, the menu should slide over the content and show the navigation item names (see images). If is set the sidebar toggle-mode to "shrink-content(initially closed)" the navigation looks like I want it to, but the content is shrinked (which of course is the expected behaviour). If I set the toggle-mode to "slide over content" the whole navigation bar is gone. Does somebody have an idea how to achieve a combination of "slide over content" and "shrink content (initially closed)" without hacking the javascript responsible for the toggle? I am using Mendix 7.16 with Atlas-Ui. Thanks in advance.   Edit: Just tested it in Atlas-UI Reference App Mx 7.9. Toggle Mode "Slider over content" seems to be broken in Atlas-UI for navigation sidebars.  
asked
2 answers
0

Hi Andrew.

We had the same problems and rewrote our own layout using “display:flex”

and a lot of css position attributes.

But It seems like you’ve solved the issue.

answered
5

@Andrew Daniels: 

you can achieve this with some minor changes in the CSS, where 60px is the width of the sidebar: 

.layout-atlas {
    .region-sidebar {
        position: absolute;
        z-index: 100;
    }

    .mx-layoutcontainer-center {
        &.mx-scrollcontainer-center {
            position: absolute;
            left: 60px;
            width: calc(100% - 60px);
        }
    }
}

 

 

answered