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

@@ -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 {

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;
   }