feat: start of new navbar

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode, Suspense } from 'react';
 import { Footer } from '../components/Footer';
-import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
+import Navbar from '../components/Navbar';
 import { Party3 } from '../components/Party3';
 import * as App from '../stores/app';
 import { Checks } from './components/Checks';
@@ -68,7 +68,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               direction="column"
               style={{
                 minHeight: '100vh',
-                paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
+                // paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
               }}
             >
               {!isEmbed && <Navbar />}

src/components/Navbar/components/EverythingSearch.tsx

@@ -1,42 +0,0 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Card, TextField } from '@radix-ui/themes';
-import { ComponentProps, useState } from 'react';
-
-export function EverythingSearch({
-  style,
-  ...props
-}: ComponentProps<typeof TextField.Root>) {
-  const [search, setSearch] = useState('');
-
-  return (
-    <>
-      <TextField.Root
-        value={search}
-        placeholder="Search tanks, players, clans..."
-        style={{ position: 'relative', ...style }}
-        onChange={(event) => {
-          setSearch(event.target.value.trim());
-        }}
-        {...props}
-      >
-        <TextField.Slot>
-          <MagnifyingGlassIcon />
-        </TextField.Slot>
-
-        {search.length > 0 && (
-          <TextField.Slot>
-            <Card
-              style={{
-                position: 'absolute',
-                top: 'calc(100% + 8px)',
-                left: 0,
-                width: '100%',
-                zIndex: 1,
-              }}
-            />
-          </TextField.Slot>
-        )}
-      </TextField.Root>
-    </>
-  );
-}

src/components/Navbar/index.css.ts

@@ -1,56 +1,23 @@
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
-const MIN_EXPANDED_TOOLS = 752;
+const MIN_WIDTH = 640 + 64;
+
+export const hamburger = style({
+  display: 'inline-flex',
 
-export const hamburgerButton = style({
   '@media': {
-    [`screen and (min-width: ${MIN_EXPANDED_TOOLS}px)`]: {
+    [`screen and (min-width: ${MIN_WIDTH}px)`]: {
       display: 'none',
     },
   },
 });
 
-const navbarBase = style({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100%',
-  zIndex: 2,
-  padding: '1rem',
-  backgroundColor: 'var(--color-panel-translucent)',
-  backdropFilter: 'blur(4rem)',
-  WebkitBackdropFilter: 'blur(4rem)',
-  boxSizing: 'border-box',
-  transition: 'max-height 0.2s ease-in-out',
-  overflow: 'hidden',
-});
-export const navbar = styleVariants({
-  expanded: [
-    navbarBase,
-    {
-      maxHeight: '100%',
-    },
-  ],
-  collapsed: [
-    navbarBase,
-    {
-      maxHeight: 65,
-    },
-  ],
-});
+export const tools = style({
+  display: 'none',
 
-export const toolCard = style({
-  boxShadow: `inset 0 -200px 128px -128px var(--color-overlay)`,
-
-  ':hover': {
-    boxShadow: `inset 0 -160px 128px -128px #ffffff00`,
-  },
-});
-
-export const toolTexts = style({
   '@media': {
-    [`screen and (max-width: ${MIN_EXPANDED_TOOLS}px)`]: {
-      display: 'none',
+    [`screen and (min-width: ${MIN_WIDTH}px)`]: {
+      display: 'flex',
     },
   },
 });

src/components/Navbar/index.tsx

@@ -1,311 +1,115 @@
 'use client';
 
 import {
-  Cross1Icon,
   DiscordLogoIcon,
   GearIcon,
   HamburgerMenuIcon,
   PersonIcon,
 } from '@radix-ui/react-icons';
-import {
-  Box,
-  Button,
-  Dialog,
-  Flex,
-  IconButton,
-  Inset,
-  Popover,
-  Separator,
-  Text,
-} from '@radix-ui/themes';
+import { Box, Flex, IconButton, Separator } from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
-import { REGIONS } from '../../constants/regions';
 import { TOOLS } from '../../constants/tools';
-import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
-import { imgur, ImgurSize } from '../../core/blitzkit/imgur';
-import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
 import { PatreonIcon } from '../../icons/Patreon';
-import { WargamingIcon } from '../../icons/Wargaming';
-import strings from '../../lang/en-US.json';
-import { theme } from '../../stitches.config';
 import * as App from '../../stores/app';
 import { Link } from '../Link';
 import * as styles from './index.css';
 
-export const NAVBAR_HEIGHT = 64;
-
 export default function Navbar() {
   const [showHamburgerMenu, setShowHamburgerMenu] = useState(false);
   const pathname = usePathname();
   const logins = App.use((state) => state.logins);
-  const filteredTools = TOOLS.filter((tool) => !tool.href);
   const mutateApp = App.useMutation();
 
   return (
-    <Box
-      className={styles.navbar[showHamburgerMenu ? 'expanded' : 'collapsed']}
-      style={{ zIndex: 3 }}
+    <Flex
+      justify="center"
+      position="sticky"
+      top="0"
+      style={{
+        // 1px overlap with content to bleed color
+        marginBottom: -1,
+        backdropFilter: 'blur(4rem) brightness(0.75)',
+        WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
+        zIndex: 1,
+      }}
     >
-      <Flex direction="column" align="center">
-        <Flex
-          position="absolute"
-          top="34px"
-          justify="between"
-          align="center"
-          style={{
-            maxWidth: 1024,
-            width: '100%',
-            padding: '0 16px',
-            transform: 'translateY(-50%)',
-          }}
-          gap="8"
-        >
-          <Flex align="center" gap="4">
-            <IconButton
-              className={styles.hamburgerButton}
-              size="4"
-              variant="ghost"
-              color="gray"
-              onClick={() => setShowHamburgerMenu((state) => !state)}
-            >
-              {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
-            </IconButton>
+      <Flex flexGrow="1" maxWidth="1024px" p="2" align="center">
+        <Flex gap="3" align="center">
+          <IconButton variant="ghost" color="gray" className={styles.hamburger}>
+            <HamburgerMenuIcon />
+          </IconButton>
 
-            <Link
-              onClick={() => setShowHamburgerMenu(false)}
-              href="/"
-              style={{
-                color: 'inherit',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              weight="bold"
-            >
-              BlitzKit
-            </Link>
-          </Flex>
+          <Link
+            color="gray"
+            highContrast
+            href="/"
+            underline="hover"
+            weight="bold"
+          >
+            BlitzKit
+          </Link>
+        </Flex>
 
-          <Flex justify="center" gap="4" className={styles.toolTexts}>
-            {filteredTools.map((tool) => {
-              const selected = pathname.startsWith(`/tools/${tool.id}`);
+        <Box flexGrow="1" />
 
-              return (
+        <Flex align="center" gap="2" justify="center" className={styles.tools}>
+          {TOOLS.map((tool, index) => {
+            const selected = pathname.startsWith(`/tools/${tool.id}`);
+
+            return (
+              <>
+                {index > 0 && <Separator orientation="vertical" size="1" />}
                 <Link
-                  key={tool.id}
                   color="gray"
-                  size="2"
                   highContrast={selected}
+                  size="2"
+                  href={`tools/${tool.id}`}
+                  key={tool.title}
                   underline={selected ? 'always' : 'hover'}
-                  href={`/tools/${tool.id}`}
                 >
                   {tool.title}
                 </Link>
-              );
-            })}
-          </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)}
-              color="gray"
-              highContrast
-            >
-              <Flex style={{ width: '100%', height: '100%' }} justify="center">
-                <GearIcon />
-              </Flex>
-            </Link>
-
-            <Popover.Root>
-              <Popover.Trigger>
-                <PersonIcon style={{ cursor: 'pointer' }} />
-              </Popover.Trigger>
-
-              <Popover.Content
-                align="end"
-                width="320px"
-                onOpenAutoFocus={(event) => event.preventDefault()}
-              >
-                {(logins.patreon || logins.wargaming) && (
-                  <Flex direction="column" gap="2">
-                    <Text align="center" color="gray">
-                      Logged in accounts
-                    </Text>
-
-                    {logins.patreon && (
-                      <Flex align="center" gap="2" justify="center">
-                        <PatreonIcon width={15} height={15} />
-                        <Text>Patreon</Text>
-                        <Button
-                          color="red"
-                          variant="ghost"
-                          onClick={() =>
-                            mutateApp((draft) => {
-                              draft.logins.patreon = undefined;
-                            })
-                          }
-                        >
-                          Logout
-                        </Button>
-                      </Flex>
-                    )}
-
-                    {logins.wargaming && (
-                      <Flex align="center" gap="2" justify="center">
-                        <WargamingIcon width={15} height={15} />
-                        <Text>Wargaming</Text>
-                        <Button
-                          color="red"
-                          variant="ghost"
-                          onClick={() =>
-                            mutateApp((draft) => {
-                              draft.logins.wargaming = undefined;
-                            })
-                          }
-                        >
-                          Logout
-                        </Button>
-                      </Flex>
-                    )}
-                  </Flex>
-                )}
-
-                {!logins.patreon !== !logins.wargaming && (
-                  <Inset side="x">
-                    <Separator my="4" size="4" />
-                  </Inset>
-                )}
-
-                {(!logins.patreon || !logins.wargaming) && (
-                  <Flex direction="column" gap="2">
-                    <Text align="center" color="gray">
-                      Log in with...
-                    </Text>
-
-                    {!logins.patreon && (
-                      <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
-                        <Button style={{ width: '100%' }} color="tomato">
-                          <PatreonIcon width={15} height={15} /> Patreon
-                        </Button>
-                      </Link>
-                    )}
-
-                    {!logins.wargaming && (
-                      <Dialog.Root>
-                        <Dialog.Trigger>
-                          <Button color="red">
-                            <WargamingIcon width={15} height={15} /> Wargaming
-                          </Button>
-                        </Dialog.Trigger>
-
-                        <Dialog.Content width="fit-content">
-                          <Flex direction="column" gap="4" align="center">
-                            <Text color="gray">Choose your region</Text>
-
-                            <Flex gap="2" wrap="wrap">
-                              {REGIONS.map((region) => (
-                                <Dialog.Close key={region}>
-                                  <Link
-                                    href={
-                                      typeof window !== 'undefined'
-                                        ? `https://api.worldoftanks.${region}/wot/auth/login/?application_id=${WARGAMING_APPLICATION_ID}&redirect_uri=${encodeURIComponent(
-                                            `${location.origin}/auth/wargaming?return=${location.origin}${location.pathname}`,
-                                          )}`
-                                        : undefined
-                                    }
-                                  >
-                                    <Button color="red">
-                                      {strings.common.regions.normal[region]}
-                                    </Button>
-                                  </Link>
-                                </Dialog.Close>
-                              ))}
-                            </Flex>
-                          </Flex>
-                        </Dialog.Content>
-                      </Dialog.Root>
-                    )}
-                  </Flex>
-                )}
-              </Popover.Content>
-            </Popover.Root>
-          </Flex>
+              </>
+            );
+          })}
         </Flex>
 
-        <Flex mt="9" gap="3" justify="center" wrap="wrap">
-          {filteredTools.map((tool) => (
-            <Link
-              key={tool.id}
-              href={`/tools/${tool.id}`}
-              className={styles.toolCard}
-              style={{
-                backgroundImage: `url(${imgur(tool.image, {
-                  format: 'jpeg',
-                  size: ImgurSize.MediumThumbnail,
-                })})`,
-                cursor: tool.disabled ? 'default' : 'pointer',
-                opacity: tool.disabled ? 0.25 : 1,
-                height: 64,
-                minWidth: 176,
-                flex: 1,
-                borderRadius: 8,
-                textDecoration: 'none',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: 8,
-                transition: `box-shadow ${theme.durations.regular}`,
-              }}
-              onClick={() => setShowHamburgerMenu(false)}
-            >
-              <Text
-                style={{
-                  color: theme.colors.textHighContrast,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                {tool.title}
-              </Text>
-            </Link>
-          ))}
+        <Box flexGrow="1" />
+
+        <Flex align="center" gap="3">
+          <Link
+            style={{ display: 'flex', alignContent: 'center' }}
+            color="gray"
+            href="https://discord.gg/nDt7AjGJQH"
+            underline="none"
+            target="_blank"
+          >
+            <DiscordLogoIcon />
+          </Link>
+          <Link
+            style={{ display: 'flex', alignContent: 'center' }}
+            color="gray"
+            href="https://discord.gg/nDt7AjGJQH"
+            underline="none"
+            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>
-    </Box>
+    </Flex>
   );
 }

src/constants/tools.tsx

@@ -126,6 +126,4 @@ export const TOOLS: Tool[] = [
   playerStatsTool,
   sessionTool,
   ratingTool,
-  discordTool,
-  moreTool,
 ];