From d2a13e3f7881b389f92ffea46f6c8e0a2943f29e Mon Sep 17 00:00:00 2001
From: Ivan Vasilev <875116+konclave@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:34:55 +0100
Subject: [PATCH] fix: global navigation close/open button (#832)

* feat: improve the global navigation button

The button was hidden by the block with menu on the short screens.
The height of the button was quite small.
I've increased it and made the active area a square.

* feat: set burger icon the same size as cross icon

and remove positioning styles that should be applied by the container

* chore: remove unused imports

* fix: button vertical position

* chore: set prettier log level to debug

* chore: use debug check for prettier

* chore: revert prettier additional args

* chore: prettier format

* chore: format code
---
 src/components/layout/header/header.tsx         | 17 +++++++++--------
 .../legacy/icons/header-icons/burger-menu.tsx   | 17 +++++------------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
index 17f27d027..6f18582eb 100644
--- a/src/components/layout/header/header.tsx
+++ b/src/components/layout/header/header.tsx
@@ -77,21 +77,22 @@ const SiteTitle = styled(Link)<{ $lightTheme: boolean }>`
 const SiteMenu = styled.button<{ $lightTheme: boolean }>`
   all: unset;
   cursor: pointer;
-  z-index: ${FLYOUT_Z_INDEX};
+  z-index: ${FLYOUT_Z_INDEX + 1};
 
+  display: grid;
+  place-items: center;
   /**
    * to make it simpler to click (especially on mobile),
    * we make the button extra large
    */
-  height: 16px;
-  width: 35px;
-  text-align: right;
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
+  height: calc(12px + ${() => GRID_GAP_MOBILE});
+  width: calc(12px + ${() => GRID_GAP_MOBILE});
+  transform: translateY(calc(${() => GRID_GAP_MOBILE} / 2));
 
   ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
+    height: calc(12px + ${() => GRID_GAP_DESKTOP});
+    width: calc(12px + ${() => GRID_GAP_DESKTOP});
+    transform: translateY(calc(${() => GRID_GAP_DESKTOP} / 2));
   }
 
   .bar {
diff --git a/src/components/legacy/icons/header-icons/burger-menu.tsx b/src/components/legacy/icons/header-icons/burger-menu.tsx
index 687999a85..fef9d45a0 100644
--- a/src/components/legacy/icons/header-icons/burger-menu.tsx
+++ b/src/components/legacy/icons/header-icons/burger-menu.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
-import { GRID_GAP_DESKTOP, GRID_GAP_MOBILE } from '../../../layout/theme';
-import { up } from '../../../support/breakpoint';
 
 interface BurgerMenuProps {
   transition: boolean;
   setHoverTransition: () => void;
 }
+
 export const BurgerMenu = ({
   transition,
   setHoverTransition,
@@ -21,22 +20,16 @@ export const BurgerMenu = ({
 };
 
 const Wrapper = styled.div<{ $transition: boolean }>`
+  height: 12px;
+  width: 12px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: 3px 0px;
-
-  margin-right: -${() => GRID_GAP_MOBILE};
-  padding-right: ${() => GRID_GAP_MOBILE};
-
-  ${up('md')} {
-    margin-right: -${() => GRID_GAP_DESKTOP};
-    padding-right: ${() => GRID_GAP_DESKTOP};
-  }
+  justify-content: center;
+  gap: 2px;
 
   .bar {
     height: 2px;
-    margin-bottom: 2px;
     background-color: white;
     border-radius: 2px;
   }