OutSystems UI - Any way to make the side menu hidden by default?

Hello everyone,


Using OS 11, and the Side menu OutSystems UI framework. 

For aesthetics reasons I'd like to have the side menu start as "hidden" (with the hamburger icon to expand it) even on big desktop screens. Bit late now to switch to a top menu but this would be good enough.


Is there any way to go around doing this?

Mariano Picco wrote:

Hello everyone,


Using OS 11, and the Side menu OutSystems UI framework. 

For aesthetics reasons I'd like to have the side menu start as "hidden" (with the hamburger icon to expand it) even on big desktop screens. Bit late now to switch to a top menu but this would be good enough.


Is there any way to go around doing this?

1. Remove the menu web-block from that particular screen.

2. Changed the css for the menu as well as Content to occupy the screen.

SyntaxEditor Code Snippet

.Menu { 
    display:none;
    width:  0px;
}

.Content.ThemeGrid_Wrapper {
    left: 0px;
}


Thanks

Thanks for your reply.


That makes the menu disappear (with a few tweaks - I'm using OS 11 and Outsystems UI), but what I want is for the menu to behave the way it does in table and phone mode - with a hamburger menu that pops it in and out - and it to start 'minimized'. 


Any way to achieve this?

Hi Mariano Picco - did you find any way to do this? I am looking for a similar solution.

Solution

Hi Mariano,

Are you building a Reactive Application? If yes, the LayoutSideMenu has 3 different behaviors! 

1- In your Theme bind the correct Layout

2- The SideMenuBehavior - Overlay, starts with the menu hidden and can be opened using the hamburger icon


I hope this helps you

José Rosário

Solution

Hello José,


Exactly what I was looking for. Thanks for your help!


To expand further, if anyone else needs to use this, to set it as default to have this behaviour, change the default value for the input parameter of the layout webblock in your module (or your theme module): 



Again, thanks José!