impl collapsed mode

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -43,6 +43,7 @@
         .sidebar-contents-container {
           position: absolute;
           left: var.$grw-sidebar-nav-width;
+          min-height: 50vh;
           max-height: calc(100vh - var.$grw-sidebar-nav-width * 2);
         }
       }

apps/app/src/components/Sidebar/Sidebar.tsx

@@ -108,6 +108,7 @@ export const SidebarSubstance = memo((): JSX.Element => {
   }, [currentProductNavWidth, isCollapsedMode, isDrawerMode]);
 
   const disableResizing = isResizeDisabled || isDrawerMode || isCollapsedMode;
+  const collapsibleContentsWidth = isCollapsedMode ? currentProductNavWidth : undefined;
 
   return (
     <ResizableArea
@@ -122,7 +123,7 @@ export const SidebarSubstance = memo((): JSX.Element => {
       <SidebarHead />
       <div className="grw-sidebar-inner flex-expand-horiz" onMouseLeave={mouseLeaveHandler}>
         <SidebarNav onPrimaryItemHover={primaryItemHoverHandler} />
-        <div className="sidebar-contents-container flex-grow-1 overflow-y-auto">
+        <div className="sidebar-contents-container flex-grow-1 overflow-y-auto" style={{ width: collapsibleContentsWidth }}>
           <SidebarContents />
         </div>
       </div>