Implementing a burger menu for small viewports

Author: kallewesterling

production/css/header.css

@@ -349,6 +349,131 @@
   display: none;
 }
 
+/* ─── Mobile hamburger button ───────────────────────────────────────────────── */
+
+#mobile-nav-toggle {
+  display: none; /* revealed by mobile media query */
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  padding: var(--spacing-0);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+
+  span {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 2px;
+    background: var(--ink);
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    transform-origin: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    span {
+      transition: none;
+    }
+  }
+}
+
+body.mobile-nav-open #mobile-nav-toggle {
+  span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+
+  span:nth-child(2) {
+    opacity: 0;
+  }
+
+  span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+}
+
+/* ─── Mobile nav drawer ─────────────────────────────────────────────────────── */
+
+#mobile-nav-drawer {
+  position: fixed;
+  top: 90px; /* 45px brand bar + 45px mobile-header */
+  left: 0;
+  z-index: 3;
+  display: none; /* revealed by mobile media query */
+  flex-direction: column;
+  width: 100%;
+  max-height: 0;
+  overflow: hidden;
+  background: var(--white);
+  transition: max-height 0.25s ease;
+  border-bottom: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-elevation-sm);
+
+  .account-nav {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-3) var(--spacing-5);
+    border-bottom: 1px solid var(--color-border-default);
+
+    .login-link {
+      display: inline-flex;
+      align-items: center;
+      width: auto;
+      height: auto;
+      padding: var(--spacing-2) var(--spacing-6);
+      border-radius: var(--radius-lg);
+      background-color: var(--blurple);
+      color: var(--primary-white-hex) !important;
+      font-family: Gellix, sans-serif;
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-semibold);
+      text-decoration: none;
+    }
+
+    .info-circle-wrapper {
+      border-left: none;
+      padding: var(--spacing-0);
+      cursor: pointer;
+
+      .info-circle {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 36px;
+        height: 36px;
+        border-radius: var(--radius-circle);
+        background: var(--solar);
+        color: var(--color-surface-base);
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-none);
+      }
+    }
+  }
+
+  .mobile-nav-link {
+    display: block;
+    padding: var(--spacing-4) var(--spacing-5);
+    border-top: 1px solid var(--color-border-default);
+    color: var(--ink);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-surface-soft);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+/* ─── Mobile layout ─────────────────────────────────────────────────────────── */
+
 @media screen and (max-width: 690px) {
   #mobile-header {
     z-index: 1;
@@ -371,6 +496,18 @@
     }
   }
 
+  #mobile-nav-toggle {
+    display: flex;
+  }
+
+  #mobile-nav-drawer {
+    display: flex;
+  }
+
+  body.mobile-nav-open #mobile-nav-drawer {
+    max-height: 300px;
+  }
+
   #header #header-left > a,
   #header #header-right #to-chainguard {
     display: none;

production/skilljar-theme-v3.0/mobile-nav.mjs

@@ -0,0 +1,55 @@
+import { Q, el, sanitizeUrl } from "./utils.mjs";
+import { CG } from "./CG.mjs";
+
+/**
+ * Adds a hamburger button to #mobile-header-right and a slide-down drawer
+ * below it. The drawer holds a clone of .account-nav (so Skilljar's JS on
+ * the original is undisturbed) and the "Go to Chainguard" link.
+ *
+ * Must be called after CG.dom.mobileHeader is set and before setupCoursesNav()
+ * so the .account-nav clone is taken while the element is still in #header-right.
+ */
+export function setupMobileNav() {
+  const btn = el("button", {
+    id: "mobile-nav-toggle",
+    type: "button",
+    aria: { label: "Open menu", expanded: "false" },
+  }, [el("span"), el("span"), el("span")]);
+
+  const accountNavClone = Q(".account-nav")?.cloneNode(true) ?? null;
+
+  const drawer = el("nav", {
+    id: "mobile-nav-drawer",
+    aria: { label: "Mobile navigation", hidden: "true" },
+  }, [
+    ...(accountNavClone ? [accountNavClone] : []),
+    el("a", {
+      className: "mobile-nav-link",
+      href: sanitizeUrl("https://www.chainguard.dev"),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      text: "Go to Chainguard →",
+    }),
+  ]);
+
+  CG.dom.mobileHeader.right.replaceChildren(btn);
+
+  Q("header#mobile-header").insertAdjacentElement("afterend", drawer);
+
+  function setOpen(open) {
+    CG.dom.body.classList.toggle("mobile-nav-open", open);
+    btn.setAttribute("aria-expanded", String(open));
+    btn.setAttribute("aria-label", open ? "Close menu" : "Open menu");
+    drawer.setAttribute("aria-hidden", String(!open));
+  }
+
+  btn.addEventListener("click", () =>
+    setOpen(!CG.dom.body.classList.contains("mobile-nav-open"))
+  );
+
+  document.addEventListener("click", (e) => {
+    if (!CG.dom.body.classList.contains("mobile-nav-open")) return;
+    if (btn.contains(e.target) || drawer.contains(e.target)) return;
+    setOpen(false);
+  });
+}

production/skilljar-theme-v3.0/router.mjs

@@ -14,6 +14,7 @@ import {
 import { generateFooter } from "./footer.mjs";
 import { hide } from "./styling.mjs";
 import { setupCoursesNav } from "./courses-nav.mjs";
+import { setupMobileNav } from "./mobile-nav.mjs";
 
 /**
  * An array of page handlers that map specific page conditions to their corresponding view functions.
@@ -119,6 +120,9 @@ export function preRoute() {
       right: Q("#mobile-header-right"),
     };
 
+    // Mobile hamburger (clone account-nav before setupCoursesNav moves it)
+    setupMobileNav();
+
     // Two-tier header: brand bar + sticky courses nav
     if (CG.page.isLanding || CG.page.isCatalog) {
       setupCoursesNav();