WIP popout

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

@@ -76,7 +76,7 @@ export const ResizableArea = memo((props: Props): JSX.Element => {
     <>
       <div
         ref={resizableContainer}
-        className={`${styles['grw-resizable-area']} h-100 overflow-hidden`}
+        className={`${styles['grw-resizable-area']} h-100`}
         style={{ width }}
       >
         {children}

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

@@ -23,6 +23,22 @@
   }
 }
 
+// Popout for the collapsed mode
+.grw-sidebar-head :global {
+  .popout {
+    position: absolute;
+
+    &.grw-logo {
+      left: var.$grw-sidebar-nav-width;
+    }
+
+    &.grw-app-title {
+      left: var.$grw-sidebar-nav-width * 2;
+    }
+  }
+}
+
+
 
 // == Colors
 .grw-sidebar-head :global {

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

@@ -21,20 +21,18 @@ export const SidebarHead: FC = memo(() => {
 
   const { data: isDefaultLogo } = useIsDefaultLogo();
 
+  const popoutClass = isCollapsedMode ? 'popout' : '';
+
   return (
     <div className={`${styles['grw-sidebar-head']} d-flex w-100`}>
       {/* Brand Logo  */}
-      { !isCollapsedMode && (
-        <Link href="/" className="grw-logo d-block">
-          <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
-        </Link>
-      ) }
+      <Link href="/" className={`grw-logo d-block ${popoutClass}`}>
+        <SidebarBrandLogo isDefaultLogo={isDefaultLogo} />
+      </Link>
       <div className="flex-grow-1 d-flex align-items-center justify-content-between gap-3 overflow-hidden">
-        { !isCollapsedMode && (
-          <div className="grw-app-title text-truncate">
-            <span className="fs-4">GROWI</span>
-          </div>
-        ) }
+        <div className={`grw-app-title text-truncate ${popoutClass}`}>
+          <span className="fs-4">GROWI</span>
+        </div>
         <ToggleCollapseButton />
       </div>
     </div>