feat: new nav bar

packages/website/src/components/HomePageHotTanks.tsx

@@ -83,7 +83,7 @@ function Content() {
   const { locale, strings } = useLocale();
 
   return (
-    <Flex direction="column" pt="4">
+    <Flex direction="column" pt="4" pb="6">
       <Heading align="center" size="5">
         {strings.website.home.hot_tanks.title}
       </Heading>

packages/website/src/components/Navbar.astro

@@ -21,6 +21,7 @@ import { resolveBranchName } from '../core/blitzkit/branches';
 import { homeTool, TOOLS } from '../constants/tools';
 import { LinkI18n } from './LinkI18n';
 import { getStrings } from '../core/i18n/getStrings';
+import { Var } from '../core/radix/var';
 
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
@@ -31,93 +32,63 @@ const strings = getStrings(locale);
 ---
 
 <style>
-  .navbar {
+  .navbar[data-expanded='false'] *[data-expanded] {
-    height: var(--navbar-height);
-    top: 0;
-    z-index: 1;
-    position: sticky;
-  }
-
-  .expander {
-    --navbar-height: 48px;
-
-    /* overflow: hidden; */
-    transition-duration: 250ms;
-    width: 100%;
-    backdrop-filter: blur(4rem) brightness(0.75);
-    -webkit-backdrop-filter: blur(4rem) brightness(0.75);
-  }
-
-  .expander[data-expanded='false'] {
-    height: var(--navbar-height);
-  }
-
-  .expander[data-expanded='false'] *[data-expanded] {
     display: none;
   }
 
-  .expander[data-expanded='true'] {
+  .navbar[data-expanded='true'] *[data-closed] {
-    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;
-  }
-
-  .tools {
-    display: none;
-  }
-
-  @media (min-width: 768px) {
-    .hamburger {
-      display: none;
-    }
-
-    .tools {
-      display: flex;
-    }
-
-    .expander {
-      max-height: var(--navbar-height) !important;
-    }
-  }
 </style>
 
 <script>
-  const expander = document.querySelector<HTMLDivElement>('.expander');
+  const navbar = document.querySelector<HTMLDivElement>('.navbar');
   const hamburger = document.querySelector<HTMLButtonElement>('.hamburger');
 
-  expander?.addEventListener('click', () => {
+  navbar?.addEventListener('click', () => {
-    expander.dataset.expanded = 'false';
+    navbar.dataset.expanded = 'false';
   });
   hamburger?.addEventListener('click', (event) => {
-    if (!expander) return;
+    if (!navbar) return;
 
     event.stopPropagation();
-    expander.dataset.expanded = `${expander.dataset.expanded === 'false'}`;
+    navbar.dataset.expanded = `${navbar.dataset.expanded === 'false'}`;
   });
 </script>
 
-<Flex className="navbar">
+<Box height={{ initial: '3.5rem', sm: '3rem' }} />
-  <Flex className="expander" data-expanded="false" direction="column" gap="2">
+
-    <Flex justify="center">
+<Flex
-      <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
+  direction="column"
+  align="center"
+  data-expanded="false"
+  className="navbar"
+  width="100%"
+  top="0"
+  position="fixed"
+  height="100%"
+  style={{
+    zIndex: 1,
+  }}
+>
+  <Flex
+    width="100%"
+    maxWidth="80rem"
+    p={{ initial: '4', sm: '3' }}
+    gap="4"
+    direction="column"
+    style={{
+      backgroundColor: Var('gray-1'),
+    }}
+  >
+    <Flex align="center">
       <LinkI18n
         {locale}
         color="gray"
         highContrast
         href="/"
         underline="hover"
-          weight="bold"
+        weight="medium"
       >
         <Flex align="center" gap="1">
           BlitzKit
@@ -133,7 +104,13 @@ const strings = getStrings(locale);
 
       <Box flexGrow="1" />
 
-        <Flex align="center" gap="2" justify="center" className="tools">
+      <Flex
+        align="center"
+        gap={{ initial: '4', md: '6' }}
+        display={{ initial: 'none', sm: 'flex' }}
+        justify="center"
+        className="tools"
+      >
         {
           toolsFiltered.map((tool, index) => {
             const unavailableOnBranch = tool.branches?.every(
@@ -150,19 +127,17 @@ const strings = getStrings(locale);
             if (unavailableOnBranch) return null;
 
             return (
-                <Fragment key={tool.id}>
-                  {index > 0 && <Separator orientation="vertical" size="1" />}
               <LinkI18n
                 {locale}
+                weight={selected ? 'medium' : 'regular'}
                 color="gray"
                 highContrast={selected}
                 size="2"
                 href={`/tools/${tool.id}`}
-                    underline={selected ? 'always' : 'hover'}
+                underline="hover"
               >
                 {toolStrings.name}
               </LinkI18n>
-                </Fragment>
             );
           })
         }
@@ -170,7 +145,7 @@ const strings = getStrings(locale);
 
       <Box flexGrow="1" />
 
-        <Flex align="center" gap="3">
+      <Flex align="center" gap="4">
         <Link
           style={{ display: 'flex', alignContent: 'center' }}
           color="gray"
@@ -178,7 +153,7 @@ const strings = getStrings(locale);
           underline="none"
           target="_blank"
         >
-            <DiscordLogoIcon />
+          <DiscordLogoIcon width="1em" height="1em" />
         </Link>
 
         <LinkI18n
@@ -188,11 +163,12 @@ const strings = getStrings(locale);
           href="/settings"
           underline="none"
         >
-            <GearIcon />
+          <GearIcon width="1em" height="1em" />
         </LinkI18n>
 
         <!-- <NavbarAccount client:idle /> -->
 
+        <Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
           <IconButton variant="ghost" color="gray" className="hamburger">
             <Cross1Icon data-expanded />
             <HamburgerMenuIcon data-closed />
@@ -201,87 +177,68 @@ const strings = getStrings(locale);
       </Flex>
     </Flex>
 
-    <ScrollArea scrollbars="vertical" style={{ height: '100%', width: '100%' }}>
+    <Flex
-      <Grid
+      direction="column"
-        columns="repeat(auto-fill, minmax(12rem, 1fr))"
+      data-expanded
-        flow="dense"
+      gap="3"
-        gap="2"
+      display={{ initial: 'flex', sm: 'none' }}
-        width="100%"
-        p="3"
-        pt="0"
     >
       {
-          tools.map((tool) => {
+        toolsFiltered.map((tool) => {
           const unavailableOnBranch = tool.branches?.every(
             (branch) =>
               branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
           );
-            const toolStrings =
-              strings.website.tools[
-                (tool.stringsId ??
-                  tool.id) as keyof typeof strings.website.tools
-              ];
 
           if (unavailableOnBranch) return null;
 
+          const toolStrings =
+            strings.website.tools[
+              (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+            ];
+
           return (
-              <Flex
+            <Link
-                key={tool.id}
+              color="gray"
-                style={{
+              highContrast
-                  position: 'relative',
+              style={{ display: 'contents' }}
-                  borderRadius: 'var(--radius-2)',
+              href={`/tools/${tool.id}`}
-                  overflow: 'hidden',
-                  backgroundImage: `url(${imgur(tool.image, {
-                    format: 'jpeg',
-                    size: ImgurSize.MediumThumbnail,
-                  })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  aspectRatio: '2 / 1',
-                }}
-              >
-                <LinkI18n
-                  {locale}
-                  href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
-                  style={{
-                    display: 'flex',
-                    width: '100%',
-                    height: '100%',
-                    flexDirection: 'column',
-                    textDecoration: 'none',
-                    color: 'inherit',
-                  }}
             >
               <Box
-                    flexGrow="1"
                 style={{
-                      backgroundImage: `url(${imgur(tool.image, {
+                  borderRadius: Var('radius-2'),
-                        format: 'jpeg',
+                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
-                        size: ImgurSize.MediumThumbnail,
+                  backgroundSize: '200%',
-                      })})`,
+                  backgroundPosition: 'right center',
-                      backgroundSize: 'cover',
+                  overflow: 'hidden',
-                      backgroundPosition: 'center',
-                    }}
-                  />
-
-                  <Flex
-                    p="2"
-                    align="center"
-                    width="100%"
-                    style={{
-                      backgroundColor: 'var(--color-panel-translucent)',
-                      backdropFilter: 'blur(4rem)',
-                      WebkitBackdropFilter: 'blur(4rem)',
                 }}
               >
-                    <Text>{toolStrings.name}</Text>
+                <Flex
-                  </Flex>
+                  py="4"
-                </LinkI18n>
+                  justify="end"
+                  flexGrow="1"
+                  style={{
+                    background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
+                  }}
+                >
+                  {toolStrings.name}
                 </Flex>
+              </Box>
+            </Link>
           );
         })
       }
-      </Grid>
-    </ScrollArea>
     </Flex>
   </Flex>
+
+  <Box
+    data-expanded
+    flexGrow="1"
+    width="100%"
+    style={{
+      backgroundColor: Var('black-a7'),
+      backdropFilter: 'blur(0.5rem)',
+      WebkitBackdropFilter: 'blur(0.5rem)',
+    }}
+  />
+</Flex>

packages/website/src/components/PageWrapper.tsx

@@ -39,7 +39,7 @@ export function PageWrapper({
         gap="4"
         p={padding}
         width="100%"
-        maxWidth="50rem"
+        maxWidth="80rem"
         style={{
           margin: 'auto',
           boxSizing: 'border-box',

packages/website/src/core/radix/var.ts

@@ -9,19 +9,8 @@ export type VarName =
   | `radius-${1 | 2 | 3 | 4 | 5 | 6 | 'full'}`
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
   | `shadow-${1 | 2 | 3 | 4 | 5 | 6}`
-  | `${RadixColor | 'accent' | 'gray'}-${
+  | `${RadixColor | 'accent' | 'gray' | 'black' | 'white'}-${
-      | 1
+      | `${'' | 'a'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
-      | 2
-      | 3
-      | 4
-      | 5
-      | 6
-      | 7
-      | 8
-      | 9
-      | 10
-      | 11
-      | 12
       | 'surface'
       | 'indicator'
       | 'track'

packages/website/src/pages/[...locale]/index.astro

@@ -90,7 +90,7 @@ export const getStaticPaths = (() => {
   }
 
   <Flex p="4" justify="center" gap="4" mt="3">
-    <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
+    <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
       {