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,47 +54,15 @@ export default function Navbar() {
     }
   });
 
-  const plugs = (
-    <>
-      <Link
-        onClick={() => setShowHamburgerMenu(false)}
-        href="https://discord.gg/nDt7AjGJQH"
-        target="_blank"
-        style={{
-          color: 'inherit',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <DiscordLogoIcon width={16} height={16} />
-      </Link>
-
-      <Link
-        onClick={() => setShowHamburgerMenu(false)}
-        href="https://www.patreon.com/tresabhi"
-        target="_blank"
-        style={{
-          color: 'inherit',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <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
+        maxHeight:
+          showHamburgerMenu && !wideFormat ? '100%' : NAVBAR_HEIGHT + 1,
         zIndex: 2,
         padding: '1rem',
         background: theme.colors.appBackground1_alpha,
@@ -101,117 +70,160 @@ export default function Navbar() {
         backdropFilter: 'blur(4rem)',
         WebkitBackdropFilter: 'blur(4rem)',
         boxSizing: 'border-box',
-        transition: 'max-height 0.5s ease',
+        transition: 'max-height 0.2s ease-in-out',
         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"
+          style={{ maxWidth: 800, width: '100%', padding: '0 16px' }}
+          gap="8"
         >
-          <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">
-                <GearIcon />
-              </IconButton>
-            </Flex>
-          </Link>
-
-          {login && (
-            <Popover.Root>
-              <Popover.Trigger>
-                <IconButton variant="ghost" color="gray">
-                  <PersonIcon />
-                </IconButton>
-              </Popover.Trigger>
-
-              <Popover.Content align="center">
-                <Flex direction="column" gap="2">
-                  <Suspense fallback={<Spinner />}>
-                    <LoggedIn />
-                  </Suspense>
-                </Flex>
-              </Popover.Content>
-            </Popover.Root>
-          )}
-
-          {/* TODO: re-enable in the future */}
-          {!login && false && (
-            <Dialog.Root>
-              <Dialog.Trigger>
-                <Button variant="ghost">Log in</Button>
-              </Dialog.Trigger>
-
-              <Dialog.Content
-                style={{
-                  maxWidth: 360,
-                }}
+          <Flex align="center" gap="4">
+            {!wideFormat && (
+              <IconButton
+                size="4"
+                variant="ghost"
+                color="gray"
+                onClick={() => setShowHamburgerMenu((state) => !state)}
               >
-                <Flex direction="column" gap="2" align="center">
-                  <Heading size="3">Choose your region</Heading>
+                {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
+              </IconButton>
+            )}
 
-                  <Flex gap="4" align="center" justify="center" wrap="wrap">
-                    {REGIONS.map((region) => (
-                      <LinkRadix
-                        onClick={() => setShowHamburgerMenu(false)}
-                        key={region}
-                        href={authURL(
-                          region,
-                          typeof window === 'undefined'
-                            ? undefined
-                            : location.href,
-                        )}
-                      >
-                        {UNLOCALIZED_REGION_NAMES[region]}
-                      </LinkRadix>
-                    ))}
-                  </Flex>
-                </Flex>
-              </Dialog.Content>
-            </Dialog.Root>
+            <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"
+              target="_blank"
+              style={{
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <DiscordLogoIcon width={16} height={16} />
+            </Link>
+
+            <Link
+              onClick={() => setShowHamburgerMenu(false)}
+              href="https://www.patreon.com/tresabhi"
+              target="_blank"
+              style={{
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <PatreonIcon width={14} height={14} />
+            </Link>
+
+            <Link href="/settings" onClick={() => setShowHamburgerMenu(false)}>
+              <Flex style={{ width: '100%', height: '100%' }} justify="center">
+                <IconButton size="4" variant="ghost" color="gray">
+                  <GearIcon />
+                </IconButton>
+              </Flex>
+            </Link>
+
+            {login && (
+              <Popover.Root>
+                <Popover.Trigger>
+                  <IconButton size="4" variant="ghost" color="gray">
+                    <PersonIcon />
+                  </IconButton>
+                </Popover.Trigger>
+
+                <Popover.Content align="center">
+                  <Flex direction="column" gap="2">
+                    <Suspense fallback={<Spinner />}>
+                      <LoggedIn />
+                    </Suspense>
+                  </Flex>
+                </Popover.Content>
+              </Popover.Root>
+            )}
+
+            {/* TODO: re-enable in the future */}
+            {!login && false && (
+              <Dialog.Root>
+                <Dialog.Trigger>
+                  <Button variant="ghost">Log in</Button>
+                </Dialog.Trigger>
+
+                <Dialog.Content
+                  style={{
+                    maxWidth: 360,
+                  }}
+                >
+                  <Flex direction="column" gap="2" align="center">
+                    <Heading size="3">Choose your region</Heading>
+
+                    <Flex gap="4" align="center" justify="center" wrap="wrap">
+                      {REGIONS.map((region) => (
+                        <LinkRadix
+                          onClick={() => setShowHamburgerMenu(false)}
+                          key={region}
+                          href={authURL(
+                            region,
+                            typeof window === 'undefined'
+                              ? undefined
+                              : location.href,
+                          )}
+                        >
+                          {UNLOCALIZED_REGION_NAMES[region]}
+                        </LinkRadix>
+                      ))}
+                    </Flex>
+                  </Flex>
+                </Dialog.Content>
+              </Dialog.Root>
+            )}
+          </Flex>
         </Flex>
 
         <Flex mt="6" gap="3" justify="center" wrap="wrap">
@@ -227,8 +239,7 @@ export default function Navbar() {
                 cursor: tool.disabled ? 'default' : 'pointer',
                 opacity: tool.disabled ? 0.25 : 1,
                 height: 64,
-                minWidth: 144,
-                maxWidth: 192,
+                minWidth: 176,
                 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',