feat: apple inspired navbar

src/components/Navbar/index.tsx

@@ -18,7 +18,8 @@ import {
   Text,
 } from '@radix-ui/themes';
 import Link from 'next/link';
-import { Suspense, useEffect, useRef, useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
 import * as styles from '../../app/page.css';
 import { REGIONS, UNLOCALIZED_REGION_NAMES } from '../../constants/regions';
 import { TOOLS } from '../../constants/tools';
@@ -35,10 +36,10 @@ import { LoggedIn } from './components/LoggedIn';
 export const NAVBAR_HEIGHT = 64;
 
 export default function Navbar() {
-  const wideFormat = useWideFormat(480);
+  const wideFormat = useWideFormat(688 - 32 - 64);
   const login = useApp((state) => state.login);
   const [showHamburgerMenu, setShowHamburgerMenu] = useState(false);
-  const navbar = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
 
   useEffect(() => {
     if (!login) return;
@@ -53,8 +54,86 @@ export default function Navbar() {
     }
   });
 
-  const plugs = (
+  return (
-    <>
+    <Box
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        maxHeight:
+          showHamburgerMenu && !wideFormat ? '100%' : NAVBAR_HEIGHT + 1,
+        zIndex: 2,
+        padding: '1rem',
+        background: theme.colors.appBackground1_alpha,
+        borderBottom: theme.borderStyles.nonInteractive,
+        backdropFilter: 'blur(4rem)',
+        WebkitBackdropFilter: 'blur(4rem)',
+        boxSizing: 'border-box',
+        transition: 'max-height 0.2s ease-in-out',
+        overflow: 'hidden',
+      }}
+    >
+      <Flex direction="column" align="center" pt="2">
+        <Flex
+          justify="between"
+          align="center"
+          style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          gap="8"
+        >
+          <Flex align="center" gap="4">
+            {!wideFormat && (
+              <IconButton
+                size="4"
+                variant="ghost"
+                color="gray"
+                onClick={() => setShowHamburgerMenu((state) => !state)}
+              >
+                {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
+              </IconButton>
+            )}
+
+            <Link
+              onClick={() => setShowHamburgerMenu(false)}
+              href="/"
+              style={{
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <BlitzkitWide />
+            </Link>
+          </Flex>
+
+          {wideFormat && (
+            <Flex justify="center" gap="4">
+              {TOOLS.filter((tool) => !tool.href).map((tool) => {
+                const selected = pathname.startsWith(`/tools/${tool.id}`);
+
+                return (
+                  <LinkRadix
+                    color="gray"
+                    underline={selected ? 'always' : 'hover'}
+                    href="#"
+                    size="1"
+                    onClick={(event) => event.preventDefault()}
+                  >
+                    <Link
+                      style={{ all: 'inherit' }}
+                      key={tool.id}
+                      href={`/tools/${tool.id}`}
+                    >
+                      {tool.title}
+                    </Link>
+                  </LinkRadix>
+                );
+              })}
+            </Flex>
+          )}
+
+          <Flex align="center" gap="4">
             <Link
               onClick={() => setShowHamburgerMenu(false)}
               href="https://discord.gg/nDt7AjGJQH"
@@ -82,78 +161,10 @@ export default function Navbar() {
             >
               <PatreonIcon width={14} height={14} />
             </Link>
-    </>
-  );
-
-  return (
-    <Box
-      ref={navbar}
-      style={{
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        maxHeight: showHamburgerMenu ? '100%' : NAVBAR_HEIGHT + 1, // extra pixel for frost bleeding
-        zIndex: 2,
-        padding: '1rem',
-        background: theme.colors.appBackground1_alpha,
-        borderBottom: theme.borderStyles.nonInteractive,
-        backdropFilter: 'blur(4rem)',
-        WebkitBackdropFilter: 'blur(4rem)',
-        boxSizing: 'border-box',
-        transition: 'max-height 0.5s ease',
-        overflow: 'hidden',
-      }}
-      onPointerEnter={() => setShowHamburgerMenu(true)}
-      onPointerLeave={(event) => {
-        if (
-          navbar.current ===
-          document.elementFromPoint(event.clientX, event.clientY)
-        ) {
-          // false positive bug: https://stackoverflow.com/a/45267167/12294756
-          return;
-        }
-
-        setShowHamburgerMenu(false);
-      }}
-      onFocus={() => setShowHamburgerMenu(true)}
-      onBlur={() => setShowHamburgerMenu(false)}
-    >
-      <Flex direction="column" align="center" pt="2">
-        <Flex
-          justify="between"
-          align="center"
-          style={{ maxWidth: 1600, width: '100%', padding: '0 16px' }}
-          gap="4"
-        >
-          <IconButton
-            variant="ghost"
-            color="gray"
-            onClick={() => setShowHamburgerMenu((state) => !state)}
-          >
-            {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
-          </IconButton>
-
-          <Link
-            onClick={() => setShowHamburgerMenu(false)}
-            href="/"
-            style={{
-              color: 'inherit',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <BlitzkitWide />
-          </Link>
-
-          <div style={{ flex: 1 }} />
-
-          {wideFormat && plugs}
 
             <Link href="/settings" onClick={() => setShowHamburgerMenu(false)}>
               <Flex style={{ width: '100%', height: '100%' }} justify="center">
-              <IconButton variant="ghost" color="gray">
+                <IconButton size="4" variant="ghost" color="gray">
                   <GearIcon />
                 </IconButton>
               </Flex>
@@ -162,7 +173,7 @@ export default function Navbar() {
             {login && (
               <Popover.Root>
                 <Popover.Trigger>
-                <IconButton variant="ghost" color="gray">
+                  <IconButton size="4" variant="ghost" color="gray">
                     <PersonIcon />
                   </IconButton>
                 </Popover.Trigger>
@@ -213,6 +224,7 @@ export default function Navbar() {
               </Dialog.Root>
             )}
           </Flex>
+        </Flex>
 
         <Flex mt="6" gap="3" justify="center" wrap="wrap">
           {TOOLS.filter((tool) => !tool.href).map((tool) => (
@@ -227,8 +239,7 @@ export default function Navbar() {
                 cursor: tool.disabled ? 'default' : 'pointer',
                 opacity: tool.disabled ? 0.25 : 1,
                 height: 64,
-                minWidth: 144,
+                minWidth: 176,
-                maxWidth: 192,
                 flex: 1,
                 borderRadius: 8,
                 textDecoration: 'none',

src/constants/tools.ts

@@ -38,8 +38,9 @@ export const TOOLS: Tool[] = [
       'Compare tanks statistics and loadouts in World of Tanks Blitz',
   },
   {
+    // TODO: rename to tracker
     id: 'session',
-    title: 'Session tracker',
+    title: 'Session',
     description: 'Live session performance tracker',
     pageDescription:
       'Track your stats in real time as you play World of Tanks Blitz',