website refactor

apps/website/components/layout/AppSidebar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { AuthedNav } from '@/components/layout/AuthedNav';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { Box } from '@/ui/Box';
+import { DashboardRail } from '@/components/dashboard/DashboardRail';
+import { Text } from '@/ui/Text';
+import { Surface } from '@/ui/Surface';
+import { usePathname } from 'next/navigation';
+
+export function AppSidebar() {
+  const pathname = usePathname();
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
+
+  return (
+    <Surface
+      as="aside"
+      variant="dark"
+      width="260px"
+      position="fixed"
+      top="56px"
+      bottom={0}
+      left={0}
+      zIndex={40}
+      style={{
+        borderRight: '1px solid var(--ui-color-border-default)',
+        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
+        background: 'linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)',
+      }}
+    >
+      <DashboardRail>
+        <Box py={8} fullWidth>
+          <Box px={6} mb={10}>
+            <Box display="flex" alignItems="center" gap={2} mb={2}>
+              <Box w="2px" h="12px" bg="var(--ui-color-intent-primary)" />
+              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
+                DASHBOARD
+              </Text>
+            </Box>
+          </Box>
+          <Box px={4}>
+            {isAuthenticated ? (
+              <AuthedNav pathname={pathname} />
+            ) : (
+              <PublicNav pathname={pathname} />
+            )}
+          </Box>
+        </Box>
+      </DashboardRail>
+    </Surface>
+  );
+}