From b2669544a0edaa0cafbba61b65a79228319e259b Mon Sep 17 00:00:00 2001
From: Sagar <sadduri@adobe.com>
Date: Tue, 13 Feb 2024 17:32:47 +0530
Subject: [PATCH] top nav style changes as per new designs

---
 blocks/header/header.css | 59 +++++++++++++++++++-------------
 blocks/header/header.js  | 74 ++++++++++++++++++++--------------------
 styles/styles.css        |  4 +--
 3 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/blocks/header/header.css b/blocks/header/header.css
index 7212ddaa..d7171027 100644
--- a/blocks/header/header.css
+++ b/blocks/header/header.css
@@ -1,11 +1,11 @@
 .header.block nav {
   display: grid;
   grid-template:
-    "logo . hamburger" 75px
+    "logo . hamburger" 65px
     "sections sections sections" min-content
     "contact-us contact-us contact-us" min-content
     / min-content 1fr min-content;
-  padding: 20px;
+  padding: 0 20px;
   align-items: center;
   background-color: var(--white);
 }
@@ -13,7 +13,7 @@
 .header.block nav a {
   text-decoration: none;
   color: var(--quartz);
-  font-weight: bold;
+  font-weight: normal;
 }
 
 .header.block.nav-logo {
@@ -23,7 +23,7 @@
 .header.block .nav-logo img {
   padding: 15px 0;
   height: auto;
-  width: 105px;
+  width: 99px;
 }
 
 .header.block .nav-hamburger {
@@ -63,12 +63,12 @@
 .header.block .nav-contact-us > p > a {
   display: inline-block;
   padding: 8px 42px;
-  font-weight: normal;
   text-decoration: none;
   color: var(--white);
   background-color: var(--dark-red);
   border-bottom-left-radius: 20px;
   white-space: nowrap;
+  line-height: 19px;
 }
 
 .header.block nav .nav-sections {
@@ -86,7 +86,7 @@
   margin: 0;
   flex-direction: column;
   justify-content: center;
-  gap: 48px;
+  gap: 16px;
 }
 
 .header.block .nav-sections > ul > li > ul {
@@ -97,22 +97,23 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 0;
+  padding: 12px 0;
   border-bottom: 1px solid var(--gray);
+  font-size: 22px;
 }
 
-.header.block .nav-sections > ul > li.nav-drop > a.active-arrow-down::after {
+.header.block .nav-sections > ul > li.top-nav > a.active-arrow-down::after {
   background-image: url('images/down-arrow.png');
 }
 
-.header.block .nav-sections > ul > li.nav-drop > a > .icon {
+.header.block .nav-sections > ul > li.top-nav > a > .icon {
   display: inline-block;
   position: relative;
   height: 24px;
   width: 24px;
 }
 
-.header.block .nav-sections > ul > li.nav-drop .icon svg {
+.header.block .nav-sections > ul > li.top-nav .icon svg {
   position: absolute;
   top: 0;
   left: 0;
@@ -120,26 +121,27 @@
   height: 100%;
 }
 
-.header.block .nav-sections > ul > li.nav-drop > a > span {
+.header.block .nav-sections > ul > li.top-nav > a > span {
   transition: transform 0.3s ease-in-out;
   transform: rotate(0);
 }
 
-.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > a > span {
+.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > a > span {
   transform: rotate(180deg);
 }
 
-.header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul {
+.header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
   display: block;
 }
 
-.header.block .nav-sections > ul > li > ul > li > a {
+.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav > a {
   display: flex;
   justify-content: flex-start;
-  padding: 20px 20px 0;
+  padding: 10px 20px 0;
+  font-size: 18px;
 }
 
-.header.block .nav-sections > ul > li > ul > li.active > a {
+.header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
   text-decoration: underline;
 }
 
@@ -151,6 +153,7 @@
   grid-area: contact-us;
   display: flex;
   justify-content: center;
+  margin: 20px;
 }
 
 
@@ -158,7 +161,7 @@
 @media (min-width: 900px) {
   .header.block nav {
     grid-template:
-      "logo sections contact-us" 75px
+      "logo sections contact-us" 65px
       ". . hamburger" min-content
       / min-content 1fr min-content;
       padding: 0 90px;
@@ -178,33 +181,43 @@
     width: 100%;
   }
 
-  .header.block .nav-sections > ul > li > a {
+  .header.block .nav-sections > ul > li.top-nav > a {
     padding: 0;
     border-bottom: none;
+    font-size: 14px;
+    font-weight: bold;
   }
 
-  .header.block .nav-sections > ul > li.nav-drop > a > .icon {
+  .header.block .nav-sections > ul > li.top-nav > a > .icon {
     display: none;
   }
 
-  .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul {
+  .header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul {
     position: absolute;
     left: 0;
     width: 100vw;
     display: flex;
     opacity: 1;
     background-color: var(--gray-neutral-80);
-    top: 86px;
+    top: 65px;
     justify-content: space-evenly;
   }
 
-  .header.block .nav-sections > ul > li > ul > li.active > a {
+  .header.block .nav-sections > ul > li.top-nav > ul > li.sub-nav.active > a {
     border-bottom: 5px solid var(--white);
   }
 
-  .header.block .nav-sections > ul > li.nav-drop[aria-expanded="true"] > ul > li > a {
+  .header.block .nav-sections > ul > li.top-nav[aria-expanded="true"] > ul > li.sub-nav > a {
     padding: 10px 0;
     color: var(--gray);
+    font-size: 14px;
+    font-weight: bold;
   }
 
 }
+
+@media (min-width: 1200px) {
+.header.block nav {
+  padding: 0 140px;
+}
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
index d1b50653..74d8bff3 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -16,7 +16,7 @@ function setAttributes(element, attributes) {
 
 function toggleAllNavSections(sections, expanded = false) {
   sections
-    .querySelectorAll('.nav-sections > ul > li.nav-drop')
+    .querySelectorAll('.nav-sections > ul > li.top-nav')
     .forEach((section) => {
       setAttributes(section, {
         'aria-expanded': expanded,
@@ -83,65 +83,65 @@ function buildSections(sections) {
   const expander = document.createElement('span');
   expander.classList.add('icon', 'icon-chevron-down');
 
-  sections.querySelectorAll(':scope > ul > li').forEach((section) => {
-    const active = section.querySelector('a');
+  sections.querySelectorAll(':scope > ul > li').forEach((topmenu) => {
+    topmenu.classList.add('top-nav');
+    const active = topmenu.querySelector('a');
     if (active) {
       const url = new URL(active.href);
       if (window.location.pathname === url.pathname) {
-        section.classList.add('active');
+        topmenu.classList.add('active');
       }
     }
 
-    const submenu = section.querySelector('ul');
+    const submenu = topmenu.querySelector('ul');
     if (submenu) {
-      const anchor = section.querySelector('a');
-      anchor.append(expander.cloneNode());
-      section.classList.add('nav-drop');
+      const topanchor = topmenu.querySelector('a');
+      topanchor.append(expander.cloneNode());
 
       const submenuLinks = submenu.querySelectorAll('li > a');
-      const isCurrentPath = Array.from(submenuLinks).some((link) => {
-        const isMatch = window.location.pathname === new URL(link.href).pathname
-        && link.hash === window.location.hash;
+      const isCurrentPath = Array.from(submenuLinks).some((subanchor) => {
+        const isMatch = window.location.pathname === new URL(subanchor.href).pathname
+        && subanchor.hash === window.location.hash;
         if (isMatch) {
-          link.parentElement.classList.add('active');
-          link.href = link.hash;
+          subanchor.parentElement.classList.add('active');
+          subanchor.href = subanchor.hash;
         }
         return isMatch;
       });
-      section.setAttribute('aria-expanded', isCurrentPath ? 'true' : 'false');
+      topmenu.setAttribute('aria-expanded', isCurrentPath ? 'true' : 'false');
 
-      submenuLinks.forEach((link) => {
-        if (window.location.pathname === new URL(link.href).pathname) {
-          link.href = link.hash;
+      submenuLinks.forEach((subanchor) => {
+        subanchor.parentElement.classList.add('sub-nav');
+        if (window.location.pathname === new URL(subanchor.href).pathname) {
+          subanchor.href = subanchor.hash;
         }
-        link.addEventListener('click', (e) => {
+        subanchor.addEventListener('click', (e) => {
           // remove active class from all links
           submenuLinks.forEach((l) => l.parentElement.classList.remove('active'));
-          if (link.hash && window.location.pathname === new URL(link.href).pathname) {
-            link.parentElement.classList.add('active');
+          if (subanchor.hash && window.location.pathname === new URL(subanchor.href).pathname) {
+            subanchor.parentElement.classList.add('active');
             e.stopPropagation();
+            toggleMenu(document.getElementById('nav'), sections, false);
           }
         });
       });
 
-      anchor.setAttribute('tabindex', '0');
-      anchor.setAttribute('role', 'button');
-      anchor.addEventListener('click', (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const expanded = section.getAttribute('aria-expanded') === 'true';
-        toggleAllNavSections(sections);
+      topanchor.setAttribute('tabindex', '0');
+      topanchor.setAttribute('role', 'button');
+      topanchor.addEventListener('click', (e) => {
         if (!isDesktop.matches) {
-          section.setAttribute('aria-expanded', !expanded);
-        } else {
-          section.setAttribute('aria-expanded', true);
-        }
-        const all = section.querySelector('.show-all');
-        if (all) {
-          all.classList.remove('hide');
-        }
-        if (e.pointerType !== 'mouse') {
-          section.setAttribute('data-touch-click', 'true');
+          e.preventDefault();
+          e.stopPropagation();
+          const expanded = topmenu.getAttribute('aria-expanded') === 'true';
+          toggleAllNavSections(sections);
+          topmenu.setAttribute('aria-expanded', !expanded);
+          const all = topmenu.querySelector('.show-all');
+          if (all) {
+            all.classList.remove('hide');
+          }
+          if (e.pointerType !== 'mouse') {
+            topmenu.setAttribute('data-touch-click', 'true');
+          }
         }
       });
     }
diff --git a/styles/styles.css b/styles/styles.css
index bbf15eb3..ab1e8f99 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -118,7 +118,7 @@
   --heading-font-size-xl: 42px;
 
   /* Nav Height */
-  --nav-height: 100px;
+  --nav-height: 65px;
 
   /* Line heights */
   --line-height-xs: 1.15em;
@@ -610,7 +610,7 @@ main .disclaimer-modal-container {
 
 @media screen and (min-width: 600px) {
   :root {
-    --nav-height: 80px;
+    --nav-height: 65px;
   }
 
   main > .section > div {