website refactor

apps/website/ui/Layout.tsx

@@ -6,78 +6,71 @@ export interface LayoutProps {
   header?: ReactNode;
   footer?: ReactNode;
   sidebar?: ReactNode;
-  /**
-   * Whether the sidebar should be fixed to the side.
-   * If true, the main content will be offset by the sidebar width.
-   */
   fixedSidebar?: boolean;
-  /**
-   * Whether the header should be fixed to the top.
-   * If true, the main content will be offset by the header height.
-   */
   fixedHeader?: boolean;
+  fixedFooter?: boolean;
 }
 
 /**
  * Layout is the canonical app frame component.
- * It orchestrates the high-level structure: Header, Sidebar, Main Content, and Footer.
+ * Redesigned for "Cockpit" layout: Sidebar is primary (full height), Header and Content sit to the right.
  */
 export const Layout = ({ 
   children, 
   header, 
   footer, 
   sidebar,
-  fixedSidebar = false,
-  fixedHeader = false
+  fixedSidebar = true,
+  fixedHeader = true,
+  fixedFooter = true // Default to true for AppShellBar
 }: LayoutProps) => {
   return (
-    <Box display="flex" flexDirection="col" minHeight="100vh">
-      {header && (
+    <Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
+      {/* Sidebar - Primary Vertical Axis - Solid Background */}
+      {sidebar && (
         <Box 
-          as="header" 
-          position={fixedHeader ? "fixed" : "relative"} 
-          top={fixedHeader ? 0 : undefined} 
-          left={fixedHeader ? 0 : undefined} 
-          right={fixedHeader ? 0 : undefined} 
+          as="aside" 
+          width="64" // 16rem / 256px
+          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"
         >
-          {header}
+          {sidebar}
         </Box>
       )}
       
-      <Box display="flex" flex={1} marginTop={fixedHeader ? 14 : undefined}>
-        {sidebar && (
-          <Box 
-            as="aside" 
-            width="64" 
-            display={{ base: 'none', lg: 'block' }}
-            position={fixedSidebar ? "fixed" : "relative"}
-            top={fixedSidebar ? (fixedHeader ? 14 : 0) : undefined}
-            bottom={fixedSidebar ? 0 : undefined}
-            left={fixedSidebar ? 0 : undefined}
-            zIndex={40}
-          >
-            {sidebar}
-          </Box>
-        )}
+      {/* Main Content Area - Right of Sidebar */}
+      <Box 
+        display="flex" 
+        flexDirection="col" 
+        flex={1} 
+        marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
+        minWidth="0" // Prevent flex child overflow
+      >
+        {/* Header - Rendered directly as it contains AppShellBar (fixed) */}
+        {header}
         
+        {/* Main Scrollable Content */}
         <Box 
           as="main" 
           flex={1} 
           display="flex" 
           flexDirection="col"
-          marginLeft={fixedSidebar ? { lg: 64 } : undefined}
+          position="relative"
+          marginTop={fixedHeader ? 14 : 0} // Offset for fixed header (h-14)
+          paddingBottom={fixedFooter ? 14 : 0} // Offset for fixed footer (h-14)
         >
-          <Box flex={1}>
+          <Box flex={1} p={0}>
             {children}
           </Box>
-          
-          {footer && (
-            <Box as="footer">
-              {footer}
-            </Box>
-          )}
         </Box>
+
+        {/* Footer - Rendered directly as it contains AppShellBar (fixed) */}
+        {footer}
       </Box>
     </Box>
   );