website refactor

apps/website/components/layout/AppShellBar.tsx

@@ -2,6 +2,7 @@
 
 import { Box } from '@/ui/Box';
 import { ReactNode } from 'react';
+import { useSidebar } from '@/components/layout/SidebarContext';
 
 interface AppShellBarProps {
   position: 'top' | 'bottom';
@@ -11,22 +12,24 @@ interface AppShellBarProps {
 
 export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
   const isTop = position === 'top';
+  const { isCollapsed } = useSidebar();
   
+  const leftClass = sidebarOffset 
+    ? (isCollapsed ? 'lg:left-20' : 'lg:left-64') 
+    : 'left-0';
+
   return (
     <Box
       as={isTop ? 'header' : 'footer'}
       className={`
         fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
         h-14
-        bg-base-black/70 backdrop-blur-xl
-        border-${isTop ? 'b' : 't'} border-outline-steel
+        bg-base-black/80 backdrop-blur-xl
+        ${isTop ? 'border-b' : 'border-t'} border-white/10
         flex items-center justify-between px-6
-        transition-all duration-200
+        transition-all duration-300 ease-in-out
+        left-0 ${leftClass}
       `}
-      // Use style for responsive left offset to ensure it works
-      // We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
-      // But since we need responsive logic that matches Layout, we'll use the Box props
-      left={sidebarOffset ? { base: 0, lg: 64 } : 0}
     >
       {children}
     </Box>