feat: simplified

src/components/Navbar/index.css.ts

@@ -58,6 +58,7 @@ export const navbarExpander = styleVariants({
     navbarExpanderBase,
     {
       maxHeight: '100vh',
+      overscrollBehavior: 'contain',
     },
   ],
 });

src/components/Navbar/index.tsx

@@ -45,13 +45,9 @@ export default function Navbar() {
     <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()}
+        gap="2"
       >
         <Flex justify="center">
           <Flex flexGrow="1" maxWidth="1024px" p="3" align="center">
@@ -93,9 +89,7 @@ export default function Navbar() {
 
                 return (
                   <>
-                      {index > 0 && (
+                    {index > 0 && <Separator orientation="vertical" size="1" />}
-                        <Separator orientation="vertical" size="1" />
-                      )}
                     <Link
                       onClick={() => setShowHamburgerMenu(false)}
                       color="gray"
@@ -228,8 +222,7 @@ export default function Navbar() {
                         <Dialog.Root>
                           <Dialog.Trigger>
                             <Button color="red">
-                                <WargamingIcon width={15} height={15} />{' '}
+                              <WargamingIcon width={15} height={15} /> Wargaming
-                                Wargaming
                             </Button>
                           </Dialog.Trigger>
 
@@ -250,11 +243,7 @@ export default function Navbar() {
                                       }
                                     >
                                       <Button color="red">
-                                          {
+                                        {strings.common.regions.normal[region]}
-                                            strings.common.regions.normal[
-                                              region
-                                            ]
-                                          }
                                       </Button>
                                     </Link>
                                   </Dialog.Close>
@@ -273,7 +262,6 @@ export default function Navbar() {
         </Flex>
 
         <ScrollArea>
-            <Flex justify="center">
           <Grid
             columns="repeat(auto-fill, minmax(192px, 1fr))"
             flow="dense"
@@ -331,10 +319,8 @@ export default function Navbar() {
               </Flex>
             ))}
           </Grid>
-            </Flex>
         </ScrollArea>
       </Flex>
     </Flex>
-    </Flex>
   );
 }