Menu toggle for mobile view

src/_includes/layouts/base.njk

@@ -18,7 +18,7 @@
   {% include "partials/global/site-foot.njk" %}
   {% block foot %}
   {% endblock %}
-  {# <script type="module" src="/js/components/theme-toggle.js" async defer></script> #}
+  <script type="text/javascript" src="/js/components/menu-toggle.js" async defer></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {

src/_includes/partials/components/nav.njk

@@ -1,5 +1,5 @@
 {% if navigation.items %}
-  <nav class="nav" aria-label="{{ariaLabel}}">
+  <nav id="menu" class="nav" aria-label="{{ariaLabel}}">
     <ul class="[ nav__list ]">
       {% for item in navigation.items %}
         {% set relAttribute = '' %}

src/_includes/partials/global/site-head.njk

@@ -6,6 +6,7 @@
         <span class="visually-hidden">{{ site.name }} - Home</span>
         {% include "../../../images/astrolabe_logo.svg" %}
       </a>
+      <button onclick="menuToggle()">menu</button>
       {% set ariaLabel = 'navigation' %}
       {% include "partials/components/nav.njk" %}
     </div>

src/js/components/menu-toggle.js

@@ -0,0 +1,4 @@
+function menuToggle() {
+  var menu = document.getElementById('menu');
+  menu.classList.toggle('show');
+}

src/scss/components/_nav.scss

@@ -47,3 +47,24 @@
     }
   }
 }
+
+@media (max-width: 767.98px) {
+  .nav {
+    display: none;
+    margin-top: 0;
+
+    &.show {
+      display: block;
+      width: 100%;
+    }
+
+    &__list {
+      flex-direction: column;
+      align-items: flex-end;
+
+      > * + * {
+        margin-left: 0;
+      }
+    }
+  }
+}