How to: Sidebar Frame that overlays page content & expands on hover!

[AJVancattenburch]

Preview

Following the steps in this walkthrough tutorial will deliver the result from the attached video below:

Instructions

1. Start by adding a new Sidebar Frame component to your page (add as a global component on multi-page apps).
2. Place a single container component within your Sidebar Frame and assign it with the name menuContainer.
3. On the Sidebar Frame inspector panel, make sure the following properties are configured:
   • Expand content to fit property is checked / set to true.
   • In the Add-ons + options, add a footer for relevant footer details (optional). Go into footer options and remove all padding that is set by default.
   • Set the width property to a dynamic width of 250px (or larger/smaller for your use case) whenever menuContainer is hovered, else set to 60px like so:
     
     
4. Set the Expand content to fit property as checked / true on menuContainer, as well:
   
   
5. Inside the body of the container component we named menuContainer, place a new navigation component, open the component inspector panel, and set the orientation property to the vertical option. Then place any links within it that you need to populate your navigation menu items.
6. Add one more final container component we will call footerContainer, place it within the footer of menuContainer, open its component inspector and set the following configurations:
   • set to the full width,
   • set Show border property to false / unchecked,
   • set Padding and Margin to None.
     
     
7. Finally, add the following components to the final container component we named footerContainer:
   • Divider component with its Margin property set to None, and its Hidden property set to {{!menuContainer.hovered}} in inspector panel.
   • Avatar component below the divider.
8. At this point, you should have a Sidebar Frame with the following component hierarchy withiin it:
   
   
9. For the final step, we are going to need to set a bit of custom CSS in order to get the desired result -- having side navigation that can expand when hovered, and not allowing the Retool UI to push the content on the rest of our page to accomodate for the width of our Sidebar Frame. Copy/paste the following CSS, and you should be good to go!

   [data-testid="ViewerPageLayout::sidebarFrame1"] {
     /* Set to overlay main view */
     z-index: 2;
     /* Link list */
     [role="tablist"] {
       padding: 12px 16px;
       [data-testid^="VerticalNavigationMenuItem::tab"] {
         position: relative;
         /* Create spacing between Documents & Reports links */
         &:nth-of-type(5) {
           margin-bottom: 20px;
           /* Divider between links */
           &::before {
             content: '';
             position: absolute;
             top: 130%;
             left: 50%;
             transform: translateX(-50%);
             height: 1px;
             width: 90%;
             background: {{theme.tertiary}};
           }
         }
         /* Padding between links */
         button {
           padding-block: 11px;
         }
       }
       /* Space between link SVG icons and link text + SVG styles */
       div:has( > svg) {
         width: 20px !important;
         margin: 0 24px 0 -2px;
   
         svg {
           min-width: 100% !important;
           height: auto !important;
         }
       }
     
       div[class*="_label_"] {
         white-space: nowrap;
       }
     }
   }
   
   /* Force main content to keep current position & width */
   [data-testid="ViewerPageLayout::SplitViewWrapper"], [data-testid="ViewerPageLayout::SplitViewWrapper"] [data-testid*="split-view-view"] {
     position: absolute;
     left: 60px;
     min-width: 1287px;
     z-index: 1;
   }
   

Hopefully other users find this useful!

[ChiEn]

Excellent! Thanks for the detailed step by step instruction! @AJVancattenburch