From 8f54b8a57615fe9749a01259e70abf09b941571c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 19 Aug 2024 13:28:46 -0500
Subject: [PATCH] feat: no push content

---
 src/components/Navbar/index.css.ts |  30 +-
 src/components/Navbar/index.tsx    | 547 +++++++++++++++--------------
 2 files changed, 305 insertions(+), 272 deletions(-)

diff --git a/src/components/Navbar/index.css.ts b/src/components/Navbar/index.css.ts
index db966b91f..02385d6b3 100644
--- a/src/components/Navbar/index.css.ts
+++ b/src/components/Navbar/index.css.ts
@@ -23,13 +23,22 @@ export const tools = style({
   },
 });
 
-const navbarBase = style({
-  // 1px overlap with content to bleed color
-  marginBottom: -1,
+export const navbar = style({
+  height: HEIGHT,
+  marginBottom: -1, // 1px overlap with content to bleed color
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+});
+
+const navbarExpanderBase = style({
+  transitionDuration: '250ms',
+  height: '1000px',
+  width: '100%',
+  overflow: 'hidden',
+
   backdropFilter: 'blur(4rem) brightness(0.75)',
   WebkitBackdropFilter: 'blur(4rem) brightness(0.75)',
-  zIndex: 1,
-  transitionDuration: '250ms',
 
   '@media': {
     [`screen and (min-width: ${MIN_WIDTH}px)`]: {
@@ -38,17 +47,22 @@ const navbarBase = style({
   },
 });
 
-export const navbar = styleVariants({
+export const navbarExpander = styleVariants({
   false: [
-    navbarBase,
+    navbarExpanderBase,
     {
       maxHeight: HEIGHT,
     },
   ],
   true: [
-    navbarBase,
+    navbarExpanderBase,
     {
       maxHeight: '100vh',
     },
   ],
 });
+
+export const navbarContent = style({
+  width: '100%',
+  maxHeight: '100vh',
+});
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 384e4deda..d47486016 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -42,280 +42,299 @@ export default function Navbar() {
   const tools = [homeTool, ...TOOLS];
 
   return (
-    <Flex
-      direction="column"
-      position="sticky"
-      top="0"
-      className={styles.navbar[`${showHamburgerMenu}`]}
-      overflow="hidden"
-    >
-      <Flex justify="center">
-        <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
-          <Flex gap="3" align="center">
-            <IconButton
-              variant="ghost"
-              color="gray"
-              className={styles.hamburger}
-              onClick={() => setShowHamburgerMenu((state) => !state)}
-              onBlur={() => setShowHamburgerMenu(false)}
-            >
-              {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
-            </IconButton>
-
-            <Link
-              color="gray"
-              highContrast
-              href="/"
-              underline="hover"
-              weight="bold"
-              onClick={() => setShowHamburgerMenu(false)}
-            >
-              BlitzKit
-            </Link>
-          </Flex>
-
-          <Box flexGrow="1" />
-
-          <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
-                    color="gray"
-                    highContrast={selected}
-                    size="2"
-                    href={`tools/${tool.id}`}
-                    key={tool.title}
-                    underline={selected ? 'always' : 'hover'}
-                  >
-                    {tool.title}
-                  </Link>
-                </>
-              );
-            })}
-          </Flex>
-
-          <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"
-              onClick={() => setShowHamburgerMenu(false)}
-            >
-              <DiscordLogoIcon />
-            </Link>
-            <Link
-              style={{ display: 'flex', alignContent: 'center' }}
-              color="gray"
-              href="https://discord.gg/nDt7AjGJQH"
-              underline="none"
-              target="_blank"
-              onClick={() => setShowHamburgerMenu(false)}
-            >
-              <PatreonIcon width="0.75em" height="0.75em" />
-            </Link>
-            <Link
-              style={{ display: 'flex', alignContent: 'center' }}
-              color="gray"
-              href="/settings"
-              underline="none"
-              target="_blank"
-              onClick={() => setShowHamburgerMenu(false)}
-            >
-              <GearIcon />
-            </Link>
-            <Popover.Root>
-              <Popover.Trigger>
-                <IconButton variant="ghost" color="gray">
-                  <PersonIcon />
-                </IconButton>
-              </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>
-
-      <ScrollArea>
-        <Flex justify="center">
-          <Grid
-            columns="repeat(auto-fill, minmax(192px, 1fr))"
-            flow="dense"
-            gap="2"
-            width="100%"
-            p="3"
-            pt="0"
-          >
-            {tools.map((tool) => (
-              <Flex
-                style={{
-                  position: 'relative',
-                  borderRadius: 'var(--radius-2)',
-                  overflow: 'hidden',
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.MediumThumbnail })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  aspectRatio: '2 / 1',
-                }}
-                onClick={() => setShowHamburgerMenu(false)}
-              >
-                <Link
-                  href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
-                  style={{
-                    display: 'flex',
-                    width: '100%',
-                    height: '100%',
-                    flexDirection: 'column',
-                    textDecoration: 'none',
-                    color: 'inherit',
+    <Flex className={styles.navbar}>
+      <Flex
+        className={styles.navbarExpander[`${showHamburgerMenu}`]}
+        align="start"
+        onClick={() => setShowHamburgerMenu((state) => !state)}
+      >
+        <Flex
+          className={styles.navbarContent}
+          direction="column"
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Flex justify="center">
+            <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
+              <Flex gap="3" align="center">
+                <IconButton
+                  variant="ghost"
+                  color="gray"
+                  className={styles.hamburger}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setShowHamburgerMenu((state) => !state);
                   }}
                 >
-                  <Box
-                    flexGrow="1"
+                  {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
+                </IconButton>
+
+                <Link
+                  color="gray"
+                  highContrast
+                  href="/"
+                  underline="hover"
+                  weight="bold"
+                  onClick={() => setShowHamburgerMenu(false)}
+                >
+                  BlitzKit
+                </Link>
+              </Flex>
+
+              <Box flexGrow="1" />
+
+              <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
+                        onClick={() => setShowHamburgerMenu(false)}
+                        color="gray"
+                        highContrast={selected}
+                        size="2"
+                        href={`tools/${tool.id}`}
+                        key={tool.title}
+                        underline={selected ? 'always' : 'hover'}
+                      >
+                        {tool.title}
+                      </Link>
+                    </>
+                  );
+                })}
+              </Flex>
+
+              <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"
+                  onClick={() => setShowHamburgerMenu(false)}
+                >
+                  <DiscordLogoIcon />
+                </Link>
+                <Link
+                  style={{ display: 'flex', alignContent: 'center' }}
+                  color="gray"
+                  href="https://discord.gg/nDt7AjGJQH"
+                  underline="none"
+                  target="_blank"
+                  onClick={() => setShowHamburgerMenu(false)}
+                >
+                  <PatreonIcon width="0.75em" height="0.75em" />
+                </Link>
+                <Link
+                  style={{ display: 'flex', alignContent: 'center' }}
+                  color="gray"
+                  href="/settings"
+                  underline="none"
+                  target="_blank"
+                  onClick={() => setShowHamburgerMenu(false)}
+                >
+                  <GearIcon />
+                </Link>
+                <Popover.Root>
+                  <Popover.Trigger>
+                    <IconButton variant="ghost" color="gray">
+                      <PersonIcon />
+                    </IconButton>
+                  </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>
+
+          <ScrollArea>
+            <Flex justify="center">
+              <Grid
+                columns="repeat(auto-fill, minmax(192px, 1fr))"
+                flow="dense"
+                gap="2"
+                width="100%"
+                p="3"
+                pt="0"
+              >
+                {tools.map((tool) => (
+                  <Flex
+                    onClick={() => setShowHamburgerMenu(false)}
                     style={{
+                      position: 'relative',
+                      borderRadius: 'var(--radius-2)',
+                      overflow: 'hidden',
                       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)',
+                      aspectRatio: '2 / 1',
                     }}
                   >
-                    <Text weight="medium">{tool.title}</Text>
+                    <Link
+                      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 weight="medium">{tool.title}</Text>
+                      </Flex>
+                    </Link>
                   </Flex>
-                </Link>
-              </Flex>
-            ))}
-          </Grid>
+                ))}
+              </Grid>
+            </Flex>
+          </ScrollArea>
         </Flex>
-      </ScrollArea>
+      </Flex>
     </Flex>
   );
 }