825
Views
9
Comments
Solved
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?

Staff
Rank: #1618
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

Rank: #82

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

Rank: #363

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?

Rank: #20381

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

Staff
Rank: #1618
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

Rank: #363

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é!

Rank: #22878

Sorry to revive such an old post, but this feature is exactly what we are looking for.  However, when I look at the layout options for Outsystems UI, I only see these 3 parameters and nothing for MenuBehavior?