website refactor

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -17,15 +17,30 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
   const isAuthenticated = !!session;
 
   return (
-    <Surface variant="dark" width="280px" borderRight position="sticky" top="0" height="100vh">
+    <Surface
+      as="aside"
+      variant="dark"
+      width="260px"
+      position="sticky"
+      top="56px"
+      height="calc(100vh - 56px)"
+      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={6} fullWidth>
-          <Box px={6} mb={8}>
-            <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
-              NAVIGATION
-            </Text>
+        <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={3}>
+          <Box px={4}>
             {isAuthenticated ? (
               <AuthedNav pathname={pathname} />
             ) : (
@@ -36,4 +51,4 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
       </DashboardRail>
     </Surface>
   );
-}
+}