I've been asked to redesign our Service Portal with a requirement to move the menu to a sidebar. Service Portal really doesn't seem to want to do that as the core page places header above body, The closest solution I have found (see below) is to set the sidebar position to absolute, and add left padding to the .body class to account for the width of the sidebar. While this works, it doesn't help with two other requirements:
- I'd like to add icons to the left of each menu item and have a toggle to let the user collapse the sidebar down to hide the menu text and just show the icons (kind of like the platform menu with UI16), which means the width of the sidebar will change.
- For mobile, the sidebar needs to be hidden completely, and toggled with a hamburger icon.
I also don't love having to use z-index to force the menu to show up, when it's technically beside the main page.
I looked at doing some things with javascript, but it doesn't look like anything at the root level of the main container has an ID...
.body {
padding-left: $chhi-menu-frame-width;
}
.menu-frame {
position: absolute;
z-index: 1000;
width: $chhi-menu-frame-width;
top: 64px;
height: calc(100vh - 64px);
background-color: $chhi-color-background-menu;
padding-left: $chhi-menu-pad-left;
padding-right: $chhi-menu-pad-right;
}
