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>
             )
@@ -141,7 +141,7 @@ const isBranchNamed = branchName !== undefined;
         </Flex>
       </Heading>
 
-      <Text color="gray" align="center" size="4"> By TrèsAbhi ❤️ </Text>
+      <Text color="gray" align="center" size="4">By TrèsAbhi ❤️</Text>
     </Flex>
   </Flex>
 </Flex>

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);
-    min-height: 0;
+    height: var(--navbar-height);
   }
 
   .expander[data-expanded='false'] *[data-expanded] {
@@ -56,14 +55,18 @@ const isBranchNamed = branchName !== undefined;
   }
 
   .expander[data-expanded='true'] {
-    max-height: 200vh;
-    min-height: 100vh;
+    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,31 +109,24 @@ 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
-            href="/"
-            underline="hover"
-            weight="bold"
-          >
-            <Flex align="center" gap="1">
-              BlitzKit
-              {
-                isBranchNamed && (
-                  <Code color="gray" size="1" highContrast variant="outline">
-                    {branchName}
-                  </Code>
-                )
-              }
-            </Flex>
-          </Link>
-        </Flex>
+        <Link
+          color="gray"
+          highContrast
+          href="/"
+          underline="hover"
+          weight="bold"
+        >
+          <Flex align="center" gap="1">
+            BlitzKit
+            {
+              isBranchNamed && (
+                <Code color="gray" size="1" variant="outline">
+                  {branchName}
+                </Code>
+              )
+            }
+          </Flex>
+        </Link>
 
         <Box flexGrow="1" />
 
@@ -183,6 +173,7 @@ const isBranchNamed = branchName !== undefined;
           >
             <DiscordLogoIcon />
           </Link>
+
           <Link
             style={{ display: 'flex', alignContent: 'center' }}
             color="gray"
@@ -193,83 +184,90 @@ 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>
 
-    <Grid
-      columns="repeat(auto-fill, minmax(192px, 1fr))"
-      flow="dense"
-      gap="2"
-      width="100%"
-      p="3"
-      pt="0"
-    >
-      {
-        tools.map((tool) => {
-          const unavailableOnBranch = tool.branches?.every(
-            (branch) =>
-              branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
-          );
+    <ScrollArea scrollbars="vertical" style={{ height: '100%', width: '100%' }}>
+      <Grid
+        columns="repeat(auto-fill, minmax(12rem, 1fr))"
+        flow="dense"
+        gap="2"
+        width="100%"
+        p="3"
+        pt="0"
+      >
+        {
+          tools.map((tool) => {
+            const unavailableOnBranch = tool.branches?.every(
+              (branch) =>
+                branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
+            );
 
-          if (unavailableOnBranch) return null;
+            if (unavailableOnBranch) return null;
 
-          return (
-            <Flex
-              key={tool.id}
-              style={{
-                position: 'relative',
-                borderRadius: 'var(--radius-2)',
-                overflow: 'hidden',
-                backgroundImage: `url(${imgur(tool.image, {
-                  format: 'jpeg',
-                  size: ImgurSize.MediumThumbnail,
-                })})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                aspectRatio: '2 / 1',
-              }}
-            >
-              <Link
-                href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
+            return (
+              <Flex
+                key={tool.id}
                 style={{
-                  display: 'flex',
-                  width: '100%',
-                  height: '100%',
-                  flexDirection: 'column',
-                  textDecoration: 'none',
-                  color: 'inherit',
+                  position: 'relative',
+                  borderRadius: 'var(--radius-2)',
+                  overflow: 'hidden',
+                  backgroundImage: `url(${imgur(tool.image, {
+                    format: 'jpeg',
+                    size: ImgurSize.MediumThumbnail,
+                  })})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  aspectRatio: '2 / 1',
                 }}
               >
-                <Box
-                  flexGrow="1"
+                <Link
+                  href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
                   style={{
-                    backgroundImage: `url(${imgur(tool.image, {
-                      format: 'jpeg',
-                      size: ImgurSize.MediumThumbnail,
-                    })})`,
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                  }}
-                />
-
-                <Flex
-                  p="2"
-                  align="center"
-                  width="100%"
-                  style={{
-                    backgroundColor: 'var(--color-panel-translucent)',
-                    backdropFilter: 'blur(4rem)',
-                    WebkitBackdropFilter: 'blur(4rem)',
+                    display: 'flex',
+                    width: '100%',
+                    height: '100%',
+                    flexDirection: 'column',
+                    textDecoration: 'none',
+                    color: 'inherit',
                   }}
                 >
-                  <Text weight="medium">{tool.title}</Text>
-                </Flex>
-              </Link>
-            </Flex>
-          );
-        })
-      }
-    </Grid>
+                  <Box
+                    flexGrow="1"
+                    style={{
+                      backgroundImage: `url(${imgur(tool.image, {
+                        format: 'jpeg',
+                        size: ImgurSize.MediumThumbnail,
+                      })})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                    }}
+                  />
+
+                  <Flex
+                    p="2"
+                    align="center"
+                    width="100%"
+                    style={{
+                      backgroundColor: 'var(--color-panel-translucent)',
+                      backdropFilter: 'blur(4rem)',
+                      WebkitBackdropFilter: 'blur(4rem)',
+                    }}
+                  >
+                    <Text>{tool.title}</Text>
+                  </Flex>
+                </Link>
+              </Flex>
+            );
+          })
+        }
+      </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{' '}