website refactor

apps/website/ui/Layout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { Box } from './Box';
+import { Box } from '@/ui/Box';
+import { useSidebar } from '@/components/layout/SidebarContext';
 
 export interface LayoutProps {
   children: ReactNode;
@@ -22,22 +23,27 @@ export const Layout = ({
   sidebar,
   fixedSidebar = true,
   fixedHeader = true,
-  fixedFooter = true // Default to true for AppShellBar
+  fixedFooter = true
 }: LayoutProps) => {
+  const { isCollapsed } = useSidebar();
+  const sidebarWidth = isCollapsed ? '20' : '64'; // 5rem vs 16rem
+  const sidebarWidthClass = isCollapsed ? 'lg:w-20' : 'lg:w-64';
+  const contentMarginClass = isCollapsed ? 'lg:ml-20' : 'lg:ml-64';
+
   return (
     <Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
       {/* Sidebar - Primary Vertical Axis - Solid Background */}
       {sidebar && (
         <Box 
           as="aside" 
-          width="64" // 16rem / 256px
+          width={sidebarWidth}
           display={{ base: 'none', lg: 'block' }}
           position={fixedSidebar ? "fixed" : "relative"}
           top={0}
           bottom={0}
           left={0}
-          zIndex={50}
-          className="bg-base-black border-r border-outline-steel"
+          style={{ zIndex: 60, width: isCollapsed ? '5rem' : '16rem' }} // Explicit style for width transition
+          className={`bg-base-black border-r border-outline-steel transition-all duration-300 ease-in-out`}
         >
           {sidebar}
         </Box>
@@ -48,7 +54,7 @@ export const Layout = ({
         display="flex" 
         flexDirection="col" 
         flex={1} 
-        marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
+        className={`transition-all duration-300 ease-in-out ${fixedSidebar && sidebar ? contentMarginClass : ''}`}
         minWidth="0" // Prevent flex child overflow
       >
         {/* Header - Rendered directly as it contains AppShellBar (fixed) */}