fix: sticky navbar

packages/website/src/components/HomeHero.astro

@@ -133,7 +133,7 @@ const isBranchNamed = branchName !== undefined;
           BlitzKit
           {
             isBranchNamed && (
-              <Code size="8" color="gray" highContrast variant="outline">
+              <Code size="8" color="gray" variant="outline">
                 {branchName}
               </Code>
             )

packages/website/src/components/Navbar.astro

@@ -33,22 +33,21 @@ const isBranchNamed = branchName !== undefined;
     height: var(--navbar-height);
     top: 0;
     z-index: 1;
+    position: sticky;
   }
 
   .expander {
     --navbar-height: 48px;
 
-    overflow: hidden;
+    /* overflow: hidden; */
     transition-duration: 250ms;
     width: 100%;
-    /* overflow: hidden; */
     backdrop-filter: blur(4rem) brightness(0.75);
     -webkit-backdrop-filter: blur(4rem) brightness(0.75);
   }
 
   .expander[data-expanded='false'] {
-    max-height: var(--navbar-height);
+    height: var(--navbar-height);
-    min-height: 0;
   }
 
   .expander[data-expanded='false'] *[data-expanded] {
@@ -56,14 +55,18 @@ const isBranchNamed = branchName !== undefined;
   }
 
   .expander[data-expanded='true'] {
-    max-height: 200vh;
+    height: 100vh;
-    min-height: 100vh;
   }
 
   .expander[data-expanded='true'] *[data-closed] {
     display: none;
   }
 
+  .expander div[data-radix-scroll-area-viewport] {
+    overflow-y: scroll !important;
+    overscroll-behavior: contain;
+  }
+
   .hamburger {
     display: inline-flex;
   }
@@ -85,12 +88,6 @@ const isBranchNamed = branchName !== undefined;
       max-height: var(--navbar-height) !important;
     }
   }
-
-  .scroll-area {
-    max-height: 200px;
-    height: 200px;
-    background-color: red;
-  }
 </style>
 
 <script>
@@ -112,12 +109,6 @@ const isBranchNamed = branchName !== undefined;
   <Flex className="expander" data-expanded="false" direction="column" gap="2">
     <Flex justify="center">
       <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
-        <Flex gap="3" align="center">
-          <IconButton variant="ghost" color="gray" className="hamburger">
-            <Cross1Icon data-expanded />
-            <HamburgerMenuIcon data-closed />
-          </IconButton>
-
         <Link
           color="gray"
           highContrast
@@ -129,14 +120,13 @@ const isBranchNamed = branchName !== undefined;
             BlitzKit
             {
               isBranchNamed && (
-                  <Code color="gray" size="1" highContrast variant="outline">
+                <Code color="gray" size="1" variant="outline">
                   {branchName}
                 </Code>
               )
             }
           </Flex>
         </Link>
-        </Flex>
 
         <Box flexGrow="1" />
 
@@ -183,6 +173,7 @@ const isBranchNamed = branchName !== undefined;
           >
             <DiscordLogoIcon />
           </Link>
+
           <Link
             style={{ display: 'flex', alignContent: 'center' }}
             color="gray"
@@ -193,12 +184,18 @@ const isBranchNamed = branchName !== undefined;
           </Link>
 
           <NavbarAccount client:idle />
+
+          <IconButton variant="ghost" color="gray" className="hamburger">
+            <Cross1Icon data-expanded />
+            <HamburgerMenuIcon data-closed />
+          </IconButton>
         </Flex>
       </Flex>
     </Flex>
 
+    <ScrollArea scrollbars="vertical" style={{ height: '100%', width: '100%' }}>
       <Grid
-      columns="repeat(auto-fill, minmax(192px, 1fr))"
+        columns="repeat(auto-fill, minmax(12rem, 1fr))"
         flow="dense"
         gap="2"
         width="100%"
@@ -263,7 +260,7 @@ const isBranchNamed = branchName !== undefined;
                       WebkitBackdropFilter: 'blur(4rem)',
                     }}
                   >
-                  <Text weight="medium">{tool.title}</Text>
+                    <Text>{tool.title}</Text>
                   </Flex>
                 </Link>
               </Flex>
@@ -271,5 +268,6 @@ const isBranchNamed = branchName !== undefined;
           })
         }
       </Grid>
+    </ScrollArea>
   </Flex>
 </Flex>

packages/website/src/components/NavbarAccount/index.tsx

@@ -35,7 +35,7 @@ function Content() {
           </IconButton>
         </Popover.Trigger>
 
-        <BlitzKitTheme>
+        <BlitzKitTheme style={{ display: 'contents' }}>
           <Popover.Content
             align="end"
             width="320px"

packages/website/src/components/Plugs.tsx

@@ -32,7 +32,7 @@ function Content() {
         <Flex direction="column" gap="3" align="center">
           <Text size="5">
             BlitzKit{' '}
-            <Code variant="outline" size="4" color="gray" highContrast>
+            <Code variant="outline" size="4" color="gray">
               opentest
             </Code>{' '}
             is available now{' '}