feat: adjust hamburger button behavior and size

- thanks for the idea @webesp124 😎
thenick775 · Jan 7, 2025 · c17df71 · c17df71
1 parent 7d46032
commit c17df71
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
@@ -113,12 +113,12 @@ const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
   color: ${({ theme }) => theme.pureWhite};
   z-index: 200;
   position: fixed;
-  left: ${NavigationMenuWidth - 6}px;
+  left: ${NavigationMenuWidth - 50}px;
   top: 12px;
   transition: 0.4s ease-in-out;
   -webkit-transition: 0.4s ease-in-out;
   cursor: pointer;
-  padding: 0.375rem 0.75rem;
+  padding: 0.05rem 0.3rem;
   border-radius: 0.25rem;
   border: none;
   min-height: 36px;
@@ -131,7 +131,7 @@ const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
 
   ${({ $isExpanded = false }) =>
     !$isExpanded &&
-    `left: -8px;
+    `left: 5px;
     `}
 
   &:focus {
@@ -176,7 +176,9 @@ export const NavigationMenu = () => {
         onClick={() => setIsExpanded((prevState) => !prevState)}
         aria-label="Menu Toggle"
       >
-        <BiMenu />
+        <BiMenu
+          style={{ width: '100%', height: '100%', verticalAlign: 'middle' }}
+        />
       </HamburgerButton>
       <NavigationMenuWrapper
         data-testid="menu-wrapper"