Hi! I've been trying to create a sidebar that will leave the menu Icons when the sidebar is collapsed, I am aiming to use the default whole height sidebar and I am using the Entities.SideMenuBehavior.Expandable Menu behavior (I saw samples that have the menus beside the main content but it's not what I need)
this is what it looks like now:
and when I click the arrow it completely hides:
I am aiming for this kind of output: (I only edited this via browser dev tool)
Thank you!
Hi @Krizza Barzaga, I have not done this before, but you can do this using CSS. I am adding some CSS that you can add in your module theme, but depending on your OutSystemsUI version, the CSS class might be different. Also, I have also done this in the inspect element, so you might need to add "!important" if required.
.layout.aside-expandable .main { margin-left: 50px;}
.desktop .aside-expandable:not(.menu-visible) .app-menu-content { display: block; width: 50px !important;}
If you have some text inside the menu, then you will have to hide that with CSS as well.
ThanksGitansh Anand
Hi @Krizza Barzaga ,
I have attached a OML of my method of handling this situation. Also please find this link https://personal-0gaek1ec.outsystemscloud.com/Sidemenu/Home where you can test out my solution.
Please contact me if you have any doubts or need help further customizing the solution.
Regards,
Akash Balamurugan