From 84644d0e66d668a9250af0375bb9ace2f1706249 Mon Sep 17 00:00:00 2001
From: Nikomus <nick.wade@live.co.uk>
Date: Fri, 13 Jan 2023 12:48:50 +0000
Subject: [PATCH 1/2] Conditionally render menu container and add accessible
 name

---
 src/components/Header.js | 74 ++++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 9f95c7ea..40ac8b83 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -47,7 +47,7 @@ const DesktopNav = () => {
       </ul>
 
       <style jsx>{`
-        
+
         .nav {
           display:flex;
         }
@@ -60,7 +60,7 @@ const DesktopNav = () => {
           justify-content: space-between;
           flex-direction: row;
           width: auto;
-     
+
 
           list-style: none;
 
@@ -72,13 +72,13 @@ const DesktopNav = () => {
           margin-left: 3rem;
         }
 
-      
+
 
 
         @media (min-width:500px) and (max-width:700px) {
           .list {
           justify-content:flex-start;
-          
+
         }
       `}</style>
     </nav>
@@ -121,33 +121,41 @@ const Header = () => {
           </div>
           {windowSize > 500 && <DesktopNav />}
           {windowSize <= 500 && (
-            <div className="hamburger-menu-container">
-              <button className="hamburger" onClick={() => setIsOpen(!isOpen)}>
+            <>
+              <button
+                className="hamburger"
+                onClick={() => setIsOpen(!isOpen)}
+                aria-label="Menu"
+                aria-expanded={isOpen}
+                aria-controls={isOpen ? 'menu' : null}
+              >
                 &#8801;
               </button>
-              <nav className="mobile-nav">
-                {isOpen && (
-                  <ul
-                    className={classNames(
-                      'list',
-                      windowSize < 500 && 'z-value'
-                    )}
-                  >
-                    <li className="first-item">
-                      <NavLink active to="/our-work">
-                        Our Work
-                      </NavLink>
-                    </li>
-                    <li>
-                      <NavLink to="/the-tribe">The team</NavLink>
-                    </li>
-                    <li>
-                      <NavLink to="/contact-us">Contact</NavLink>
-                    </li>
-                  </ul>
-                )}
-              </nav>
-            </div>
+              {isOpen && (
+                <div className="hamburger-menu-container" id="menu">
+                  <nav className="mobile-nav">
+                    <ul
+                      className={classNames(
+                        'list',
+                        windowSize < 500 && 'z-value'
+                      )}
+                    >
+                      <li className="first-item">
+                        <NavLink active to="/our-work">
+                          Our Work
+                        </NavLink>
+                      </li>
+                      <li>
+                        <NavLink to="/the-tribe">The team</NavLink>
+                      </li>
+                      <li>
+                        <NavLink to="/contact-us">Contact</NavLink>
+                      </li>
+                    </ul>
+                  </nav>
+                </div>
+              )}
+            </>
           )}
         </header>
       </ConstrainedWidth>
@@ -226,14 +234,14 @@ const Header = () => {
         }
 
         .hamburger {
+          align-self: flex-end;
           background: none;
-          color: white;
           border: none;
+          color: white;
+          display: flex;
           font-size: 3rem;
           margin: 0;
-          padding-right: 1rem;
-          display: flex;
-          align-self: flex-end;
+          z-index: 5;
         }
       `}</style>
     </div>

From 49032824dd1ee4ecf1e3c2e0aa53aa555cab1516 Mon Sep 17 00:00:00 2001
From: Nikomus <nick.wade@live.co.uk>
Date: Fri, 13 Jan 2023 13:16:04 +0000
Subject: [PATCH 2/2] Match z-index and menu rendering condition

---
 src/components/Header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index 40ac8b83..28c32f43 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -137,7 +137,7 @@ const Header = () => {
                     <ul
                       className={classNames(
                         'list',
-                        windowSize < 500 && 'z-value'
+                        windowSize <= 500 && 'z-value'
                       )}
                     >
                       <li className="first-item">