feat: no push content

src/components/Navbar/index.css.ts

@@ -23,13 +23,22 @@ export const tools = style({
   },
 });
 
-const navbarBase = style({
+export const navbar = style({
-  // 1px overlap with content to bleed color
+  height: HEIGHT,
-  marginBottom: -1,
+  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',
+});

src/components/Navbar/index.tsx

@@ -42,12 +42,16 @@ export default function Navbar() {
   const tools = [homeTool, ...TOOLS];
 
   return (
+    <Flex className={styles.navbar}>
       <Flex
+        className={styles.navbarExpander[`${showHamburgerMenu}`]}
+        align="start"
+        onClick={() => setShowHamburgerMenu((state) => !state)}
+      >
+        <Flex
+          className={styles.navbarContent}
           direction="column"
-      position="sticky"
+          onClick={(event) => event.stopPropagation()}
-      top="0"
-      className={styles.navbar[`${showHamburgerMenu}`]}
-      overflow="hidden"
         >
           <Flex justify="center">
             <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
@@ -56,8 +60,10 @@ export default function Navbar() {
                   variant="ghost"
                   color="gray"
                   className={styles.hamburger}
-              onClick={() => setShowHamburgerMenu((state) => !state)}
+                  onClick={(event) => {
-              onBlur={() => setShowHamburgerMenu(false)}
+                    event.stopPropagation();
+                    setShowHamburgerMenu((state) => !state);
+                  }}
                 >
                   {showHamburgerMenu ? <Cross1Icon /> : <HamburgerMenuIcon />}
                 </IconButton>
@@ -87,8 +93,11 @@ export default function Navbar() {
 
                   return (
                     <>
-                  {index > 0 && <Separator orientation="vertical" size="1" />}
+                      {index > 0 && (
+                        <Separator orientation="vertical" size="1" />
+                      )}
                       <Link
+                        onClick={() => setShowHamburgerMenu(false)}
                         color="gray"
                         highContrast={selected}
                         size="2"
@@ -205,7 +214,10 @@ export default function Navbar() {
                         </Text>
 
                         {!logins.patreon && (
-                      <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
+                          <Link
+                            style={{ width: '100%' }}
+                            href={patreonLoginUrl()}
+                          >
                             <Button style={{ width: '100%' }} color="tomato">
                               <PatreonIcon width={15} height={15} /> Patreon
                             </Button>
@@ -216,7 +228,8 @@ export default function Navbar() {
                           <Dialog.Root>
                             <Dialog.Trigger>
                               <Button color="red">
-                            <WargamingIcon width={15} height={15} /> Wargaming
+                                <WargamingIcon width={15} height={15} />{' '}
+                                Wargaming
                               </Button>
                             </Dialog.Trigger>
 
@@ -237,7 +250,11 @@ export default function Navbar() {
                                         }
                                       >
                                         <Button color="red">
-                                      {strings.common.regions.normal[region]}
+                                          {
+                                            strings.common.regions.normal[
+                                              region
+                                            ]
+                                          }
                                         </Button>
                                       </Link>
                                     </Dialog.Close>
@@ -267,6 +284,7 @@ export default function Navbar() {
               >
                 {tools.map((tool) => (
                   <Flex
+                    onClick={() => setShowHamburgerMenu(false)}
                     style={{
                       position: 'relative',
                       borderRadius: 'var(--radius-2)',
@@ -276,7 +294,6 @@ export default function Navbar() {
                       backgroundPosition: 'center',
                       aspectRatio: '2 / 1',
                     }}
-                onClick={() => setShowHamburgerMenu(false)}
                   >
                     <Link
                       href={tool.id.length === 0 ? '/' : `/tools/${tool.id}`}
@@ -317,5 +334,7 @@ export default function Navbar() {
             </Flex>
           </ScrollArea>
         </Flex>
+      </Flex>
+    </Flex>
   );
 }