From 3d68cab30a5f5bd713ce0d958426c7e501a11970 Mon Sep 17 00:00:00 2001
From: Bryan Stopp <bstopp@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:20:19 -0600
Subject: [PATCH] Fix mobile icons and opening issue. (#174)

---
 blocks/header/header.css | 15 +++++++++++++--
 blocks/header/header.js  |  6 ++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index c2264db7..398a5dd1 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -97,7 +97,7 @@ body.light-nav {
   font-family: var(--font-family-proxima);
   font-weight: var(--font-weight-normal);
   font-size: var(--body-font-size-s);
-  letter-spacing:var(--letter-spacing-reg);
+  letter-spacing: var(--letter-spacing-reg);
   line-height: var(--body-font-size-s);
   text-decoration: none;
   cursor: pointer;
@@ -197,6 +197,7 @@ body.light-nav {
 }
 
 .header.block nav .nav-hamburger .nav-hamburger-icon {
+  position: relative;
   height: 24px;
   width: 24px;
 }
@@ -208,9 +209,19 @@ body.light-nav {
 
 .header.block nav .nav-hamburger .close {
   display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 
 .header.block nav .nav-hamburger .open {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
   filter: var(--hamburger-filter);
 }
 
@@ -239,7 +250,7 @@ body.light-nav {
     height: var(--nav-height);
     background: transparent;
   }
-  
+
   body.light-nav .header.block nav[aria-expanded="true"] {
     --logo-filter: invert(1);
   }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index b250ba36..38a4b658 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -3,7 +3,7 @@ import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.
 import { open as openSignIn, close as closeSignIn } from '../login/login.js';
 
 // media query match that indicates mobile/tablet width
-const isDesktop = BREAKPOINTS.medium;
+const isDesktop = BREAKPOINTS.large;
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
@@ -236,7 +236,9 @@ export default async function decorate(block) {
     nav.setAttribute('aria-expanded', 'false');
     // prevent mobile nav behavior on window resize
     toggleMenu(nav, navSections, isDesktop.matches);
-    isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+    isDesktop.addEventListener('change', () => {
+      toggleMenu(nav, navSections, isDesktop.matches);
+    });
 
     decorateIcons(nav);
     const navWrapper = document.createElement('div');