website refactor

apps/website/ui/Sidebar.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+
+export interface SidebarProps {
+  children: ReactNode;
+}
+
+export const Sidebar = ({ children }: SidebarProps) => {
+  return (
+    <Box 
+      as="aside" 
+      display={{ base: 'none', lg: 'flex' }} 
+      flexDirection="col" 
+      width="16rem" 
+      bg="var(--ui-color-bg-surface)" 
+      style={{ borderRight: '1px solid var(--ui-color-border-default)', overflowY: 'auto' }}
+    >
+      {children}
+    </Box>
+  );
+};