• Problem: Every time you click on a side menu item (like "Settings"), the menu is reloading, and the header is also refreshing.
• Solution: You don’t want the whole page to reload just because you clicked on a menu item. Instead, use client-side actions or Ajax to load the side menu items without refreshing the entire page. This way, only the content related to that menu will change, but the header stays intact.

• Problem: The logo looks weird or out of place when the side menu is collapsed.
• Solution: To fix this, use CSS Flexbox to make sure the logo stays centered or aligned properly no matter what. Flexbox will make sure the logo behaves the same way whether the side menu is collapsed or expanded for this you can use this CSS :-

.header-logo {

    display: flex;

    justify-content: center; 

    align-items: center;

}

• Problem: You want a fixed header and a side menu that expands and collapses when you click on the hamburger icon.
• Solution: In OutSystems, you can easily set up a fixed header with a static position. For the expandable side menu, just use OutSystems' navigation widgets and add a simple toggle action to show/hide the side menu. You can use some CSS transitions to make it look smooth:

.side-menu {

    width: 250px; 

    transition: all 0.3s ease;

}

.side-menu.collapsed {

    width: 0px;

}

Then, use a client action (like JavaScript or OutSystems logic) to toggle the .collapsed class when the hamburger button is clicked.

Navigating to the Right Screen

• Problem: When you click a side menu item, it should take you to the correct screen.
• Solution: Use Navigation Actions in OutSystems. When you click on a side menu item, just use the Navigate action to load the appropriate screen,

$public.Document.location = '/SupplierDetails';

Preventing Gaps on Collapsed Side Menu

• Problem: You’re seeing a gap when the side menu is collapsed.
• Solution: This happens when the side menu’s width isn’t properly adjusted when it’s collapsed. Use CSS to hide or shrink the side menu when collapsed, so it doesn’t leave any unwanted gaps:

.side-menu.collapsed {

    width: 0px;    

    visibility: hidden; 

}