feat: adjust hamburger button behavior and size (#240)

- thanks for the idea @webesp124 😎
thenick775 · Jan 7, 2025 · a2dda7c · a2dda7c
1 parent 7d46032
commit a2dda7c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -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"