bring back menu drawer, optional

src/_data/meta.js

@@ -57,8 +57,9 @@ module.exports = {
     ariaTop: 'Main',
     ariaBottom: 'Complementary',
     ariaPlatforms: 'Platforms',
-    closedText: 'Menu',
+    // activate alternative mobile menu with drawer
-    drawerMenu: true
+    drawerMenu: true,
+    navLabel: 'Menu'
   },
   themeSwitch: {
     title: 'Theme',

src/_includes/components/burger-template.njk

@@ -4,13 +4,21 @@
 
 <template id="burger-template">
   <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
-    <span>Menu</span>
+    <span>{{ meta.navigation.navLabel }}</span>
-    <svg width="24" height="24" aria-hidden="true">
+
-      <path
+    <svg
-        fill-rule="evenodd"
+      xmlns="http://www.w3.org/2000/svg"
-        d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z"
+      width="1em"
-        clip-rule="evenodd"
+      height="1em"
-      />
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14" />
+      <path d="M12 5v14" />
     </svg>
   </button>
 </template>

src/_includes/partials/main-nav.njk

@@ -1,4 +1,15 @@
-<nav id="mainnav" class="site-nav" aria-label="{{ meta.navigation.ariaTop }}">
+<!-- check for drawer menu being activated in meta.js -->
+{% set drawerMenu = meta.navigation.drawerMenu %}
+
+{% if drawerMenu %}
+  {% set drawerClass = "site-nav-drawer" %}
+{% endif %}
+
+<nav
+  id="mainnav"
+  class=" {{ drawerClass or 'site-nav' }}"
+  aria-label="{{ meta.navigation.ariaTop }}"
+>
   <ul class="cluster" role="list">
     {% for item in navigation.top %}
       <li>
@@ -18,6 +29,6 @@
   </ul>
 </nav>
 
-{% if meta.navigation.drawerMenu %}
+{% if drawerMenu %}
   {% include "components/burger-template.njk" %}
 {% endif %}

src/_layouts/base.njk

@@ -64,10 +64,11 @@
 
     <!-- defered js  -->
 
-    <!-- masonry fallback, if true in frontmatter -->
     {% if masonry %}
+      <!-- masonry fallback, if true in frontmatter -->
       <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
     {% endif %}
+
     {% if youtube %}
       <!-- youtube, if true in frontmatter -->
       <script
@@ -76,6 +77,11 @@
       ></script>
     {% endif %}
 
+    <!-- menu drawer js, if true in meta -->
+    {% if meta.navigation.drawerMenu %}
+      <script src="/assets/scripts/nav-drawer.js?{{ assetHash }}" defer></script>
+    {% endif %}
+
     <!-- easteregg js, if true in meta -->
     {% if meta.easteregg %}
       <script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>

src/assets/css/blocks/site-nav-drawer.css

@@ -1,92 +1,79 @@
-@media (min-width: 38em) {
-  nav.navbar {
-    --nav-button-display: none;
-    --nav-position: static;
-  }
-
-  nav.navbar ul {
-    --nav-list-background: transparent;
-    --nav-list-layout: row;
-    --nav-list-position: static;
-    --nav-list-padding: 0;
-    --nav-list-height: auto;
-    --nav-list-width: 100%;
-    --nav-list-shadow: none;
-    --nav-list-transform: none;
-    --nav-list-visibility: visible;
-  }
-}
-
 /* set on parent div to get the right z-index context */
 .ontop {
   z-index: 1;
   position: relative;
 }
 
-nav.navbar {
+.site-nav-drawer {
   position: var(--nav-position, absolute);
-  /* inset-block-start: 0.5rem; */
   inset-inline-end: 0.1rem;
 }
 
 /* Remove default list styling and create layout for list */
-nav.navbar ul {
+.site-nav-drawer ul {
-  background: var(--nav-list-background, var(--color-light));
+  --cluster-vertical-alignment: normal;
-  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
+  --gutter: var(--space-xs);
-  display: flex;
-  flex-direction: var(--nav-list-layout, column);
-  gap: var(--space-s);
-  block-size: var(--nav-list-height, 100vh);
   list-style: none;
   margin: 0;
-  padding: var(--nav-list-padding, var(--space-l) var(--space-s));
+  line-height: 0.5em;
+  padding: var(--nav-list-padding, var(--space-2xl) var(--space-s));
+  background: var(--nav-list-background, var(--color-bg));
+  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
+  flex-direction: var(--nav-list-layout, column);
+  block-size: var(--nav-list-height, 100vh);
   position: var(--nav-list-position, fixed);
-  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
+  inset-block-start: 0;
-  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
+  inset-inline-end: 0;
   inline-size: var(--nav-list-width, min(22rem, 100vw));
   visibility: var(--nav-list-visibility, visible);
 }
 
-nav.navbar [aria-expanded='false'] + ul {
+.site-nav-drawer [aria-expanded='false'] + ul {
   transform: var(--nav-list-transform, translateX(100%));
   visibility: var(--nav-list-visibility, hidden);
 }
 
 /* animates ul only when opening to avoid flash on page load, svg always */
 @media (prefers-reduced-motion: no-preference) {
-  nav.navbar [aria-expanded='true'] + ul,
+  .site-nav-drawer [aria-expanded='true'] + ul,
-  nav.navbar svg {
+  .site-nav-drawer svg {
-    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
+    transition:
+      transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55),
       visibility 0.05s linear;
   }
 }
 
 /* Basic link styling */
-nav.navbar a {
+.site-nav-drawer a {
-  --text-color: var(--color-dark);
+  --text-color: var(--color-text);
+  --background-color: var(--color-bg);
+  --border-color: transparent;
+  background-color: var(--background-color);
   color: var(--text-color);
-  padding: 0.1rem;
+  padding: var(--anchor-padding, var(--space-s));
   text-decoration: none;
   display: block;
-  text-decoration-line: underline;
+  border-radius: var(--border-radius);
-  text-decoration-color: var(--border-color, transparent);
+  border: 1px solid var(--border-color);
-  text-decoration-thickness: 3px;
-  text-underline-offset: 0.3em;
 }
 
 /* Change the border-color on :hover and :focus */
-nav.navbar a:where(:hover, :focus) {
+.site-nav-drawer a:where(:hover, :focus) {
-  --border-color: var(--text-color);
+  --background-color: var(--color-bg-accent);
+  --text-color: var(--color-text-accent);
+  --border-color: var(--color-bg-accent);
 }
 
 /* Change border-color and color for the active page */
-nav.navbar [aria-current='page'] {
+.site-nav-drawer [aria-current='page'],
-  --border-color: var(--color-primary);
+.site-nav-drawer [data-state='active'] {
-  --text-color: var(--color-primary);
+  --background-color: var(--color-bg-accent);
+  --text-color: var(--color-text);
+  --border-color: var(--color-bg-accent);
 }
 
 /* Reset button styling */
-nav.navbar button {
+.site-nav-drawer button {
   all: unset;
   display: var(--nav-button-display, flex);
   align-items: center;
@@ -97,21 +84,67 @@ nav.navbar button {
   padding: var(--space-xs) 0;
 }
 
-nav.navbar span {
+.site-nav-drawer span {
   font-size: var(--size-step-min-1);
   font-weight: bold;
   text-transform: uppercase;
   padding-inline-end: var(--space-2xs);
 }
 
-nav.navbar svg {
+.site-nav-drawer svg {
   block-size: 100%;
   inline-size: auto;
-}
-header svg {
   transform: translateY(-0.1em);
+  color: var(--color-text);
 }
 
-nav.navbar [aria-expanded='true'] svg {
+.site-nav-drawer [aria-expanded='true'] svg {
   transform: var(--nav-list-rotate, rotate(45deg));
 }
+
+@media screen(sm) {
+  .site-nav-drawer {
+    --nav-button-display: none;
+    --nav-position: static;
+  }
+
+  .site-nav-drawer ul {
+    --nav-list-background: transparent;
+    --nav-list-layout: row;
+    --nav-list-position: static;
+    --nav-list-padding: 0;
+    --nav-list-height: auto;
+    --nav-list-width: 100%;
+    --nav-list-shadow: none;
+    --nav-list-transform: none;
+    --nav-list-visibility: visible;
+  }
+
+  .site-nav-drawer a {
+    --anchor-padding: var(--space-xs) 0.2em;
+    --text-color: var(--color-text);
+    --background-color: transparent;
+    --border-color: transparent;
+    --text-decoration: transparent;
+    text-decoration-line: underline;
+    text-decoration-color: var(--text-decoration, transparent);
+    text-decoration-thickness: 3px;
+    text-underline-offset: 0.2em;
+  }
+
+  .site-nav-drawer a:where(:hover, :focus) {
+    --text-color: var(--color-text);
+    --background-color: transparent;
+    --border-color: transparent;
+    --text-decoration: var(--color-text-accent);
+  }
+
+  /* Change border-color and color for the active page */
+  .site-nav-drawer [aria-current='page'],
+  .site-nav-drawer [data-state='active'] {
+    --text-color: var(--color-primary);
+    --background-color: transparent;
+    --border-color: transparent;
+    --text-decoration: var(--color-primary);
+  }
+}