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?

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

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

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

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?

Hi Chris, I am in the same boat. Did you find an alternative or work around?


Not yet - but I suspect it's only available in the Reactive UI, not the Traditional.

In Traditional web, using the latest OutsystemsUI, you will have to change your root Webblock for the layout of your screen to LayoutSideMenu:


On your Common widgets you'll find the LayoutSide:


And then if you click on the + next to Device Configuration, you can convince your app that a Tablet should start at full HD width, and that makes the side menu always a burger. I tried setting the DesktopSmall but that didn't make a difference: 


That should force the side menu to be a Burger all the time. I don't know if it has any other unforseen consequences.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.