change sidebar width to use a panda token

web/panda.config.ts

@@ -136,6 +136,14 @@ export default defineConfig({
             accent: { value: "{colors.accent.default}" },
           },
         },
+        sizes: {
+          sidebarWidth: {
+            value: {
+              md: "33%",
+              lg: "25%",
+            },
+          },
+        },
         spacing: {
           safeBottom: { value: "env(safe-area-inset-bottom)" },
         },

web/src/components/site/Navigation/Navigation.tsx

@@ -36,17 +36,7 @@ export function Navigation() {
           md: "flex",
         }}
         height="dvh"
-        // The sidebar width is identical in both this container and the sidebar
-        // itself. The reason for this is the sidebar is "position: fixed" which
-        // means it cannot inherit the width from a parent since its true parent
-        // is the viewport, and to get around this, the default layout positions
-        // an empty box to the left of the viewport in order to push the content
-        // right and then the actual sidebar is rendered on top of this with the
-        // same width sizing configuration.
-        minWidth={{
-          md: "1/4",
-          lg: "1/3",
-        }}
+        minWidth="sidebarWidth"
         boxShadow="md"
       >
         <Sidebar />

web/src/components/site/Navigation/Sidebar/Sidebar.tsx

@@ -22,10 +22,7 @@ export function Sidebar() {
     <styled.header
       display="flex"
       position="fixed"
-      width={{
-        md: "1/4",
-        lg: "1/3",
-      }}
+      width="sidebarWidth"
       height="full"
       justifyContent="end"
       bgColor="accent.200"

web/styled-system/tokens/index.css

@@ -529,5 +529,17 @@
   --colors-bg-emphasized: var(--colors-gray-500);
   --colors-bg-disabled: var(--colors-gray-400)
 }
+
+@media screen and (min-width: 48em) {
+  :where(:root, :host) {
+    --sizes-sidebar-width: 1/3
+        }
+    }
+
+@media screen and (min-width: 64em) {
+  :where(:root, :host) {
+    --sizes-sidebar-width: 1/4
+        }
+    }
   }
 

web/styled-system/tokens/index.mjs

@@ -2075,6 +2075,10 @@ const tokens = {
     "value": "var(--colors-border-accent)",
     "variable": "var(--colors-border-accent)"
   },
+  "sizes.sidebarWidth": {
+    "value": "var(--sizes-sidebar-width)",
+    "variable": "var(--sizes-sidebar-width)"
+  },
   "spacing.safeBottom": {
     "value": "var(--spacing-safe-bottom)",
     "variable": "var(--spacing-safe-bottom)"