feat: more things

src/components/Navbar/index.css.ts

@@ -1,6 +1,7 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
-const MIN_WIDTH = 640 + 64;
+const MIN_WIDTH = 640 + 128;
+const HEIGHT = 48;
 
 export const hamburger = style({
   display: 'inline-flex',
@@ -21,3 +22,33 @@ export const tools = style({
     },
   },
 });
+
+const navbarBase = style({
+  // 1px overlap with content to bleed color
+  marginBottom: -1,
+  backdropFilter: 'blur(4rem) brightness(0.75)',
+  WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
+  zIndex: 1,
+  transitionDuration: '250ms',
+
+  '@media': {
+    [`screen and (min-width: ${MIN_WIDTH}px)`]: {
+      maxHeight: HEIGHT,
+    },
+  },
+});
+
+export const navbar = styleVariants({
+  false: [
+    navbarBase,
+    {
+      maxHeight: HEIGHT,
+    },
+  ],
+  true: [
+    navbarBase,
+    {
+      maxHeight: '100vh',
+    },
+  ],
+});

src/components/Navbar/index.tsx

@@ -1,15 +1,25 @@
 'use client';
 
 import {
+  Cross1Icon,
   DiscordLogoIcon,
   GearIcon,
   HamburgerMenuIcon,
   PersonIcon,
 } from '@radix-ui/react-icons';
-import { Box, Flex, IconButton, Separator } from '@radix-ui/themes';
+import {
+  Box,
+  Flex,
+  Grid,
+  IconButton,
+  ScrollArea,
+  Separator,
+  Text,
+} from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import { TOOLS } from '../../constants/tools';
+import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
 import { PatreonIcon } from '../../icons/Patreon';
 import * as App from '../../stores/app';
 import { Link } from '../Link';
@@ -23,93 +33,170 @@ export default function Navbar() {
 
   return (
     <Flex
-      justify="center"
+      direction="column"
       position="sticky"
       top="0"
-      style={{
+      className={styles.navbar[`${showHamburgerMenu}`]}
-        // 1px overlap with content to bleed color
+      overflow="hidden"
-        marginBottom: -1,
-        backdropFilter: 'blur(4rem) brightness(0.75)',
-        WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
-        zIndex: 1,
-      }}
     >
-      <Flex flexGrow="1" maxWidth="1024px" p="2" align="center">
+      <Flex justify="center">
-        <Flex gap="3" align="center">
+        <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
-          <IconButton variant="ghost" color="gray" className={styles.hamburger}>
+          <Flex gap="3" align="center">
-            <HamburgerMenuIcon />
+            <IconButton
-          </IconButton>
+              variant="ghost"
+              color="gray"
+              className={styles.hamburger}
+              onClick={() => setShowHamburgerMenu((state) => !state)}
+            >
+              {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
+            </IconButton>
 
-          <Link
+            <Link
-            color="gray"
+              color="gray"
-            highContrast
+              highContrast
-            href="/"
+              href="/"
-            underline="hover"
+              underline="hover"
-            weight="bold"
+              weight="bold"
+              onClick={() => setShowHamburgerMenu(false)}
+            >
+              BlitzKit
+            </Link>
+          </Flex>
+
+          <Box flexGrow="1" />
+
+          <Flex
+            align="center"
+            gap="2"
+            justify="center"
+            className={styles.tools}
           >
-            BlitzKit
+            {TOOLS.map((tool, index) => {
-          </Link>
+              const selected = pathname.startsWith(`/tools/${tool.id}`);
-        </Flex>
 
-        <Box flexGrow="1" />
+              return (
+                <>
+                  {index > 0 && <Separator orientation="vertical" size="1" />}
+                  <Link
+                    color="gray"
+                    highContrast={selected}
+                    size="2"
+                    href={`tools/${tool.id}`}
+                    key={tool.title}
+                    underline={selected ? 'always' : 'hover'}
+                  >
+                    {tool.title}
+                  </Link>
+                </>
+              );
+            })}
+          </Flex>
 
-        <Flex align="center" gap="2" justify="center" className={styles.tools}>
+          <Box flexGrow="1" />
-          {TOOLS.map((tool, index) => {
-            const selected = pathname.startsWith(`/tools/${tool.id}`);
 
-            return (
+          <Flex align="center" gap="3">
-              <>
+            <Link
-                {index > 0 && <Separator orientation="vertical" size="1" />}
+              style={{ display: 'flex', alignContent: 'center' }}
-                <Link
+              color="gray"
-                  color="gray"
+              href="https://discord.gg/nDt7AjGJQH"
-                  highContrast={selected}
+              underline="none"
-                  size="2"
+              target="_blank"
-                  href={`tools/${tool.id}`}
+              onClick={() => setShowHamburgerMenu(false)}
-                  key={tool.title}
+            >
-                  underline={selected ? 'always' : 'hover'}
+              <DiscordLogoIcon />
-                >
+            </Link>
-                  {tool.title}
+            <Link
-                </Link>
+              style={{ display: 'flex', alignContent: 'center' }}
-              </>
+              color="gray"
-            );
+              href="https://discord.gg/nDt7AjGJQH"
-          })}
+              underline="none"
-        </Flex>
+              target="_blank"
-
+              onClick={() => setShowHamburgerMenu(false)}
-        <Box flexGrow="1" />
+            >
-
+              <PatreonIcon width="0.75em" height="0.75em" />
-        <Flex align="center" gap="3">
+            </Link>
-          <Link
+            <Link
-            style={{ display: 'flex', alignContent: 'center' }}
+              style={{ display: 'flex', alignContent: 'center' }}
-            color="gray"
+              color="gray"
-            href="https://discord.gg/nDt7AjGJQH"
+              href="/settings"
-            underline="none"
+              underline="none"
-            target="_blank"
+              target="_blank"
-          >
+              onClick={() => setShowHamburgerMenu(false)}
-            <DiscordLogoIcon />
+            >
-          </Link>
+              <GearIcon />
-          <Link
+            </Link>
-            style={{ display: 'flex', alignContent: 'center' }}
+            <IconButton variant="ghost" color="gray">
-            color="gray"
+              <PersonIcon />
-            href="https://discord.gg/nDt7AjGJQH"
+            </IconButton>
-            underline="none"
+          </Flex>
-            target="_blank"
-          >
-            <PatreonIcon width="0.75em" height="0.75em" />
-          </Link>
-          <Link
-            style={{ display: 'flex', alignContent: 'center' }}
-            color="gray"
-            href="/settings"
-            underline="none"
-            target="_blank"
-          >
-            <GearIcon />
-          </Link>
-          <IconButton variant="ghost" color="gray">
-            <PersonIcon />
-          </IconButton>
         </Flex>
       </Flex>
+
+      <ScrollArea>
+        <Flex justify="center">
+          <Grid
+            columns="repeat(auto-fill, minmax(128px, 1fr))"
+            flow="dense"
+            gap="2"
+            width="100%"
+            p="4"
+            pt="0"
+          >
+            {TOOLS.map((tool) => (
+              <Flex
+                style={{
+                  position: 'relative',
+                  borderRadius: 'var(--radius-2)',
+                  overflow: 'hidden',
+                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center',
+                  aspectRatio: '4 / 3',
+                }}
+                onClick={() => setShowHamburgerMenu(false)}
+              >
+                <Link
+                  href={`/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.LargeThumbnail })})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                    }}
+                  />
+
+                  <Flex
+                    p="2"
+                    align="center"
+                    width="100%"
+                    direction={{
+                      initial: 'column',
+                      sm: 'row',
+                    }}
+                    style={{
+                      backgroundColor: 'var(--color-panel-translucent)',
+                      backdropFilter: 'blur(4rem)',
+                      WebkitBackdropFilter: 'blur(4rem)',
+                    }}
+                  >
+                    <Text weight="medium">{tool.title}</Text>
+                  </Flex>
+                </Link>
+              </Flex>
+            ))}
+          </Grid>
+        </Flex>
+      </ScrollArea>
     </Flex>
   );
 }