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,191 +32,92 @@ 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 flexGrow="1" maxWidth="1024px" p="3" align="center">
-        <LinkI18n
-          {locale}
-          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>
-        </LinkI18n>
 
-        <Box flexGrow="1" />
+<Flex
-
+  direction="column"
-        <Flex align="center" gap="2" justify="center" className="tools">
+  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="medium"
+      >
+        <Flex align="center" gap="1">
+          BlitzKit
           {
-            toolsFiltered.map((tool, index) => {
+            isBranchNamed && (
-              const unavailableOnBranch = tool.branches?.every(
+              <Code color="gray" size="1" variant="outline">
-                (branch) =>
+                {branchName}
-                  branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
+              </Code>
-              );
+            )
-              const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
-              const toolStrings =
-                strings.website.tools[
-                  (tool.stringsId ??
-                    tool.id) as keyof typeof strings.website.tools
-                ];
-
-              if (unavailableOnBranch) return null;
-
-              return (
-                <Fragment key={tool.id}>
-                  {index > 0 && <Separator orientation="vertical" size="1" />}
-                  <LinkI18n
-                    {locale}
-                    color="gray"
-                    highContrast={selected}
-                    size="2"
-                    href={`/tools/${tool.id}`}
-                    underline={selected ? 'always' : 'hover'}
-                  >
-                    {toolStrings.name}
-                  </LinkI18n>
-                </Fragment>
-              );
-            })
           }
         </Flex>
+      </LinkI18n>
 
-        <Box flexGrow="1" />
+      <Box flexGrow="1" />
 
-        <Flex align="center" gap="3">
+      <Flex
-          <Link
+        align="center"
-            style={{ display: 'flex', alignContent: 'center' }}
+        gap={{ initial: '4', md: '6' }}
-            color="gray"
+        display={{ initial: 'none', sm: 'flex' }}
-            href="https://discord.gg/nDt7AjGJQH"
+        justify="center"
-            underline="none"
+        className="tools"
-            target="_blank"
-          >
-            <DiscordLogoIcon />
-          </Link>
-
-          <LinkI18n
-            {locale}
-            style={{ display: 'flex', alignContent: 'center' }}
-            color="gray"
-            href="/settings"
-            underline="none"
-          >
-            <GearIcon />
-          </LinkI18n>
-
-          <!-- <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(12rem, 1fr))"
-        flow="dense"
-        gap="2"
-        width="100%"
-        p="3"
-        pt="0"
       >
         {
-          tools.map((tool) => {
+          toolsFiltered.map((tool, index) => {
             const unavailableOnBranch = tool.branches?.every(
               (branch) =>
                 branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
             );
+            const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
             const toolStrings =
               strings.website.tools[
                 (tool.stringsId ??
@@ -225,63 +127,118 @@ const strings = getStrings(locale);
             if (unavailableOnBranch) return null;
 
             return (
-              <Flex
+              <LinkI18n
-                key={tool.id}
+                {locale}
-                style={{
+                weight={selected ? 'medium' : 'regular'}
-                  position: 'relative',
+                color="gray"
-                  borderRadius: 'var(--radius-2)',
+                highContrast={selected}
-                  overflow: 'hidden',
+                size="2"
-                  backgroundImage: `url(${imgur(tool.image, {
+                href={`/tools/${tool.id}`}
-                    format: 'jpeg',
+                underline="hover"
-                    size: ImgurSize.MediumThumbnail,
-                  })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  aspectRatio: '2 / 1',
-                }}
               >
-                <LinkI18n
+                {toolStrings.name}
-                  {locale}
+              </LinkI18n>
-                  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, {
-                        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>{toolStrings.name}</Text>
-                  </Flex>
-                </LinkI18n>
-              </Flex>
             );
           })
         }
-      </Grid>
+      </Flex>
-    </ScrollArea>
+
+      <Box flexGrow="1" />
+
+      <Flex align="center" gap="4">
+        <Link
+          style={{ display: 'flex', alignContent: 'center' }}
+          color="gray"
+          href="https://discord.gg/nDt7AjGJQH"
+          underline="none"
+          target="_blank"
+        >
+          <DiscordLogoIcon width="1em" height="1em" />
+        </Link>
+
+        <LinkI18n
+          {locale}
+          style={{ display: 'flex', alignContent: 'center' }}
+          color="gray"
+          href="/settings"
+          underline="none"
+        >
+          <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 />
+          </IconButton>
+        </Flex>
+      </Flex>
+    </Flex>
+
+    <Flex
+      direction="column"
+      data-expanded
+      gap="3"
+      display={{ initial: 'flex', sm: 'none' }}
+    >
+      {
+        toolsFiltered.map((tool) => {
+          const unavailableOnBranch = tool.branches?.every(
+            (branch) =>
+              branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
+          );
+
+          if (unavailableOnBranch) return null;
+
+          const toolStrings =
+            strings.website.tools[
+              (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+            ];
+
+          return (
+            <Link
+              color="gray"
+              highContrast
+              style={{ display: 'contents' }}
+              href={`/tools/${tool.id}`}
+            >
+              <Box
+                style={{
+                  borderRadius: Var('radius-2'),
+                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
+                  backgroundSize: '200%',
+                  backgroundPosition: 'right center',
+                  overflow: 'hidden',
+                }}
+              >
+                <Flex
+                  py="4"
+                  justify="end"
+                  flexGrow="1"
+                  style={{
+                    background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
+                  }}
+                >
+                  {toolStrings.name}
+                </Flex>
+              </Box>
+            </Link>
+          );
+        })
+      }
+    </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} />
 
       {