feat: mobile navigation sidebar menu

src/_includes/layouts/project.njk

@@ -17,8 +17,15 @@
     <div class="content">
         <nav aria-labelledby="project-menu" class="flow">
             <h2 id="project-menu">{% __ 'project-menu' %}</h2>
-            <ul role="list" class="flow">
-            </ul>
+            <inclusive-disclosure>
+                <button aria-controls="{{ title | slugify }}-menu">
+                    <h2 id="project-menu-mobile">{% __ 'project-menu' %}</h2>
+                </button>
+                <div content id="{{ title | slugify }}-menu">
+                    <ul role="list" class="flow">
+                    </ul>
+                </div>
+            </inclusive-disclosure>
         </nav>
         <article class="flow">
         {{ content | safe }}

src/_transforms/parse.js

@@ -53,7 +53,7 @@ export default (value, outputPath) => {
             }
         }
 
-        const pageNavHeadings = document.querySelectorAll("main:has(nav) h2");
+        const pageNavHeadings = document.querySelectorAll("main:has(nav) article h2");
         if (pageNavHeadings.length > 0) {
             const navContainer = document.querySelector("main nav ul");
             for (const heading of pageNavHeadings) {

src/assets/scripts/app.js

@@ -15,27 +15,22 @@ customElements.define(
             super();
 
             this.toggle = this.querySelector("[aria-controls]");
-            this.content = this.querySelector("[content]");
 
-            if (!this.toggle || !this.content) {
+            if (!this.toggle) {
                 return;
             }
 
             this.toggle.removeAttribute("hidden");
             this.toggle.setAttribute("aria-expanded", false);
-            this.content.setAttribute("hidden", "");
-
             this.toggle.addEventListener("click", this);
         }
 
         handleEvent(event) {
             event.preventDefault();
             if (this.toggle.getAttribute("aria-expanded") === "true") {
                 this.toggle.setAttribute("aria-expanded", false);
-                this.content.setAttribute("hidden", "");
             } else {
                 this.toggle.setAttribute("aria-expanded", true);
-                this.content.removeAttribute("hidden");
             }
         }
     }

src/assets/styles/collections/_projects.css

@@ -38,17 +38,54 @@
 
 .project nav,
 .project article {
-    padding-inline: var(--common-inline-padding);
     box-shadow: inset 0 -0.1875rem 0 0 var(--fl-fgColor, transparent);
 }
 
 .project nav {
     background-color: var(--fl-bgColor, var(--color-indigo-100));
-    padding-block: 1.25rem 3.125rem;
+}
+
+.project nav > h2 {
+    display: none;
+}
+
+.project nav inclusive-disclosure {
+    padding-inline: 0;
+}
+
+.project nav inclusive-disclosure > * {
+    padding-inline: var(--common-inline-padding);
+}
+
+.project nav inclusive-disclosure [aria-expanded] {
+    box-shadow: none;
+}
+
+.project nav inclusive-disclosure [aria-expanded]:after {
+    right: var(--common-inline-padding);
+}
+
+@media (width >= 70.875rem) {
+    .project nav > h2 {
+        display: block;
+    }
+
+    .project nav inclusive-disclosure > * {
+        padding-inline: 0;
+    }
+
+    .project nav inclusive-disclosure [aria-expanded] {
+        display: none;
+    }
+
+    .project nav inclusive-disclosure [aria-expanded] + * {
+        display: block;
+    }
 }
 
 .project article {
     padding-block: 2.125rem 5rem;
+    padding-inline: var(--common-inline-padding);
 }
 
 .project article > * {

src/assets/styles/components/_disclosure.css

@@ -53,6 +53,14 @@ inclusive-disclosure [aria-expanded] {
     }
 }
 
+inclusive-disclosure [aria-expanded] + * {
+    display: none;
+}
+
+inclusive-disclosure [aria-expanded="true"] + * {
+    display: block;
+}
+
 inclusive-disclosure [aria-expanded="true"]::after {
     transform: rotate(180deg);
 }