From 0965ae00c0b3aa2a11dbfaed4b2ef26f373984db Mon Sep 17 00:00:00 2001
From: thenick775 <nvancisedev@gmail.com>
Date: Tue, 7 Jan 2025 13:59:44 -0800
Subject: [PATCH] feat: adjust hamburger button behavior and size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- thanks for the idea @webesp124 😎
---
 .../navigation-menu/navigation-menu.spec.tsx           | 10 +++++-----
 .../src/components/navigation-menu/navigation-menu.tsx |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx
index e83ae184..bae9ae41 100644
--- a/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx
+++ b/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx
@@ -45,7 +45,7 @@ describe('<NavigationMenu />', () => {
 
     expect(screen.getByTestId('menu-wrapper')).toHaveStyle(`left: 0`);
     expect(screen.getByLabelText('Menu Toggle')).toHaveStyle(
-      `left: ${NavigationMenuWidth - 6}px`
+      `left: ${NavigationMenuWidth - 50}px`
     );
     expect(screen.getByLabelText('Menu Dismiss')).toBeInTheDocument();
 
@@ -54,14 +54,14 @@ describe('<NavigationMenu />', () => {
     expect(screen.getByTestId('menu-wrapper')).toHaveStyle(
       `left: -${NavigationMenuWidth + 5}px`
     );
-    expect(screen.getByLabelText('Menu Toggle')).toHaveStyle('left: -8px');
+    expect(screen.getByLabelText('Menu Toggle')).toHaveStyle('left: -5px');
     expect(screen.queryByLabelText('Menu Dismiss')).not.toBeInTheDocument();
 
     await userEvent.click(screen.getByLabelText('Menu Toggle'));
 
     expect(screen.getByTestId('menu-wrapper')).toHaveStyle(`left: 0`);
     expect(screen.getByLabelText('Menu Toggle')).toHaveStyle(
-      `left: ${NavigationMenuWidth - 6}px`
+      `left: ${NavigationMenuWidth - 50}px`
     );
     expect(screen.getByLabelText('Menu Dismiss')).toBeInTheDocument();
   });
@@ -71,7 +71,7 @@ describe('<NavigationMenu />', () => {
 
     expect(screen.getByTestId('menu-wrapper')).toHaveStyle(`left: 0`);
     expect(screen.getByLabelText('Menu Toggle')).toHaveStyle(
-      `left: ${NavigationMenuWidth - 6}px`
+      `left: ${NavigationMenuWidth - 50}px`
     );
     expect(screen.getByLabelText('Menu Dismiss')).toBeInTheDocument();
 
@@ -80,7 +80,7 @@ describe('<NavigationMenu />', () => {
     expect(screen.getByTestId('menu-wrapper')).toHaveStyle(
       `left: -${NavigationMenuWidth + 5}px`
     );
-    expect(screen.getByLabelText('Menu Toggle')).toHaveStyle('left: -8px');
+    expect(screen.getByLabelText('Menu Toggle')).toHaveStyle('left: -5px');
     expect(screen.queryByLabelText('Menu Dismiss')).not.toBeInTheDocument();
   });
 
diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
index b5951126..926f08b9 100644
--- a/gbajs3/src/components/navigation-menu/navigation-menu.tsx
+++ b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
@@ -113,12 +113,11 @@ 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;
   border-radius: 0.25rem;
   border: none;
   min-height: 36px;
@@ -131,7 +130,7 @@ const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
 
   ${({ $isExpanded = false }) =>
     !$isExpanded &&
-    `left: -8px;
+    `left: -5px;
     `}
 
   &:focus {
@@ -176,7 +175,9 @@ export const NavigationMenu = () => {
         onClick={() => setIsExpanded((prevState) => !prevState)}
         aria-label="Menu Toggle"
       >
-        <BiMenu />
+        <BiMenu
+          style={{ height: '29px', width: '29px', verticalAlign: 'middle' }}
+        />
       </HamburgerButton>
       <NavigationMenuWrapper
         data-testid="menu-wrapper"