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('', () => {
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('', () => {
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('', () => {
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('', () => {
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)`
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)`
${({ $isExpanded = false }) =>
!$isExpanded &&
- `left: -8px;
+ `left: -5px;
`}
&:focus {
@@ -176,7 +175,9 @@ export const NavigationMenu = () => {
onClick={() => setIsExpanded((prevState) => !prevState)}
aria-label="Menu Toggle"
>
-
+