Merge pull request #22 from Netcentric/7-menu

Updates menu
Netcentric · Dec 11, 2024 · 9e58a86 · 9e58a86
2 parents 8aa01ea + 37d1bb1
commit 9e58a86
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 48 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -1,60 +1,64 @@
 /* header and nav layout */
 header {
-  border-bottom: 2px solid var(--col-neutral20);
+  --header-border-bottom-size: 2px;
+
+  display: flex;
+  align-items: center;
+  border-bottom: var(--header-border-bottom-size) solid var(--col-neutral20);
+
+  @media (min-width: 1280px) {
+    align-items: flex-end;
+  }
 }
 
-.nav-wrapper {
-  --nav-wrapper-padding-block: 26px;
+.header {
+  flex: 1;
+}
 
-  padding-block: var(--nav-wrapper-padding-block);
+.nav-wrapper {
+  position: relative;
   background-color: var(--background-color);
-  width: 100%;
-
-  @media (min-width: 768px) {
-    --nav-wrapper-padding-block: 10px;
-  }
 }
 
 .nav {
+  --nav-gap: 0 26px;
+
   display: grid;
   grid-template:
-    'hamburger brand tools' var(--nav-height)
-    'sections sections sections' 1fr / auto 1fr auto;
+    'brand tools hamburger' 1fr / auto 1fr auto;
   align-items: center;
-  gap: 0 24px;
+  gap: var(--nav-gap);
   margin: auto;
   max-width: var(--content-max-width);
-  height: var(--nav-height);
   padding-inline: var(--content-padding-inline);
   font-family: var(--body-font-family);
 
-  @media (min-width: 1280px) {
-    display: flex;
-    justify-content: space-between;
-    gap: 0 32px;
-  }
-
   &[aria-expanded='true'] {
     grid-template:
-      'hamburger brand' var(--nav-height)
-      'sections sections' 1fr
-      'tools tools' var(--nav-height) / auto 1fr;
+      'brand hamburger' var(--nav-height)
+      'sections sections' auto
+      'tools tools' 1fr / 1fr auto;
     overflow-y: auto;
     min-height: 100dvh;
+
+    @media (min-width: 768px) {
+      grid-template:
+        'brand tools hamburger' var(--nav-height) / auto 1fr auto;
+      min-height: auto;
+    }
 
     @media (min-width: 1280px) {
-      min-height: 0;
+      --nav-gap: 16px;
+
+      grid-template:
+        'brand tools' auto
+        'sections sections' 1fr / 1fr auto;
       overflow: visible;
     }
   }
 
   p {
     margin: 0;
-    line-height: 1;
-  }
-
-  a:any-link {
-    color: currentcolor;
   }
 }
 
@@ -157,19 +161,21 @@ header {
 
 .nav-brand__logo {
   img {
+    display: block;
     width: 83px;
     height: auto;
   }
 }
 
 .nav-brand__title {
-  font-size: var(--txt151-font-size);
-  line-height: var(--txt151-line-height);
+  font-size: var(--txt155-font-size);
+  line-height: var(--txt155-line-height);
 }
 
 
 /* sections */
 .nav-sections {
+  box-sizing: border-box;
   grid-area: sections;
   flex: 1 1 auto;
   display: none;
@@ -182,29 +188,94 @@ header {
   }
 
   nav[aria-expanded='true'] & {
+    --nav-sections-margin-inline: calc(var(--content-padding-inline) * -1);
+    --nav-sections-padding: 20px var(--content-padding-inline);
+    --nav-sections-inset: calc(100% + var(--header-border-bottom-size)) 0 auto auto;
+    --nav-sections-border-top: var(--header-border-bottom-size) solid var(--col-neutral20);
+
     display: block;
     visibility: visible;
     align-self: start;
+    margin-inline: var(--nav-sections-margin-inline);
+    padding: var(--nav-sections-padding);
+    border-radius: 0 0 2px 2px;
+    border-top: var(--nav-sections-border-top);
+    border-bottom: 1px solid var(--col-neutral20);
+    background-color: var(--col-white);
+
+    @media (min-width: 768px) {
+      --nav-sections-margin-inline: 0;
+      --nav-sections-border-top: 0;
+      --nav-sections-padding: 20px 40px;
+
+      align-self: unset;
+      position: absolute;
+      inset: calc(100% + var(--header-border-bottom-size)) 0 auto auto;
+      min-width: 300px;
+      box-shadow: var(--box-shadow);
+    }
 
     @media (min-width: 1280px) {
+      --nav-sections-padding: 0;
+
       align-self: unset;
+      position: static;
+      box-shadow: none;
     }
   }
 
   ul {
+    --nav-sections-list-gap: 12px;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--nav-sections-list-gap);
     list-style: none;
+    margin: 0;
     padding-left: 0;
     font-size: var(--txt154-font-size);
     line-height: var(--txt154-line-height);
 
     @media (min-width: 1280px) {
-      display: flex;
-      gap: 24px;
+      --nav-sections-list-gap: 40px;
+
+      flex-direction: row;
       margin: 0;
     }
 
+    a:any-link {
+      color: currentcolor;
+    }
+
     > li {
-      font-weight: 500;
+      font-size: var(--txt159-font-size);
+      line-height: var(--txt159-line-height);
+
+      a:any-link {
+        --nav-section-link-active-color: transparent;
+
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        gap: 4px;
+        text-decoration: none;
+
+        &::after {
+          content: '';
+          display: block;
+          height: 2px;
+          margin-block-end: -2px;
+          background-color: var(--nav-section-link-active-color);
+        }
+
+        &.active,
+        &:hover,
+        &:focus-visible {
+          &::after {
+            --nav-section-link-active-color: var(--col-brand30);
+          }
+        }
+      }
 
       > ul {
         margin-top: 0;
@@ -300,5 +371,77 @@ header {
 
 /* tools */
 .nav-tools {
+  --nav-tools-gap: 12px;
+  --nav-tools-padding-block: 20px;
+
+  display: none;
   grid-area: tools;
+  padding-block: var(--nav-tools-padding-block);
+
+  @media (min-width: 768px) {
+    --nav-tools-padding-block: 0;
+
+    display: block;
+  }
+
+  .default-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nav-tools-gap);
+
+    @media (min-width: 768px) {
+      --nav-tools-gap: 20px;
+
+      flex-direction: row;
+      justify-content: flex-end;
+      gap: 20px;
+    }
+  }
+
+  a.button:any-link, 
+  button {
+    margin: 0;
+
+    @media (max-width: 768px) {
+      --button-height: auto;
+
+      min-height: auto;
+      padding: 0;
+      border: 0;
+      background: none;
+      font-size: var(--txt159-font-size);
+      line-height: var(--txt159-line-height);
+      font-weight: 400;
+      color: var(--text-color);
+    }
+
+    @media (min-width: 768px) {
+      --button-horizontal-padding: 12px;
+
+      font-size: var(--txt171-font-size);
+      line-height: var(--txt171-line-height);
+
+      &:not(.button--tertiary) {
+        --button-height: 32px;
+      }
+    }
+
+    &.button--secondary {
+      &:hover,
+      &:focus {
+        @media (min-width: 768px) {
+          --button-horizontal-padding: 11px;
+        }
+      }
+    }
+  }
+
+  nav[aria-expanded='true'] & {
+    display: block;
+    align-self: flex-start;
+
+    @media (min-width: 768px) {
+      align-self: auto;
+    }
+  }
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -3,6 +3,8 @@ import { loadFragment } from '../fragment/fragment.js';
 
 // media query match that indicates desktop width
 const isDesktop = window.matchMedia('(min-width: 1280px)');
+// media query match that indicates tablet width
+const isTablet = window.matchMedia('(min-width: 768px)');
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
@@ -71,7 +73,7 @@ function toggleAllNavSections(sections, expanded = false) {
 function toggleMenu(nav, navSections, forceExpanded = null) {
   const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true';
   const button = nav.querySelector('.nav-hamburger button');
-  document.body.style.overflowY = (expanded || isDesktop.matches) ? '' : 'hidden';
+  document.body.style.overflowY = (expanded || isTablet.matches) ? '' : 'hidden';
   nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
   toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true');
   button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation');
@@ -103,6 +105,29 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
   }
 }
 
+/**
+ * Add a dedicated class to the active nav link
+ *
+ * @param   {array}  links  - nav links
+ */
+function setActiveLink(links) {
+  const removeTrailingSlash = (url) => url.replace(/\/$/, '');
+
+  links.forEach((link) => {
+    const navUrlObject = new URL(link.href);
+
+    // exclude external links
+    if (navUrlObject.origin !== window.location.origin) return;
+
+    const currentPathWithoutTrailingSlash = removeTrailingSlash(window.location.pathname);
+    const linkPathWithoutTrailingSlash = removeTrailingSlash(navUrlObject.pathname);
+
+    if (currentPathWithoutTrailingSlash === linkPathWithoutTrailingSlash) {
+      link.classList.add('active');
+    }
+  });
+}
+
 /**
  * loads and decorates the header, mainly the nav
  * @param {Element} block The header block element
@@ -151,6 +176,9 @@ export default async function decorate(block) {
     });
   }
 
+  const navLinks = navSections.querySelectorAll(':scope .default-content-wrapper > ul > li > a');
+  setActiveLink(navLinks);
+
   // hamburger for mobile
   const hamburger = document.createElement('div');
   hamburger.classList.add('nav-hamburger');