From 3a125ad0775df3d87f6afb115ea1cf16655b2d8c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Thu, 16 Jan 2025 01:40:51 +0100 Subject: [PATCH] make menu responsive on mobile + track aria-expanded status --- src/js/components/filters.js | 2 - src/js/main.js | 6 +- static/css/techreport/techreport.css | 19 +++++- templates/main.html | 2 +- templates/techreport/techreport.html | 87 ++++++++++++++++------------ 5 files changed, 72 insertions(+), 44 deletions(-) diff --git a/src/js/components/filters.js b/src/js/components/filters.js index 8a694f30..e39dde73 100644 --- a/src/js/components/filters.js +++ b/src/js/components/filters.js @@ -206,8 +206,6 @@ class Filters { /* Duplicate the technology dropdowns */ addTechnologySelector(event) { - console.log('add tech selector'); - event.preventDefault(); const selectorTemplate = document.getElementById('tech-selector').content.cloneNode(true); diff --git a/src/js/main.js b/src/js/main.js index ca5cbf3b..118b9320 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,11 +1,13 @@ -const nav = document.querySelector('header nav'); +const nav = document.querySelector('#desktop'); const mobileNav = document.querySelector('nav#mobile'); -const hamburger = document.querySelector('header .hamburger'); +const hamburger = document.querySelector('.hamburger'); if (mobileNav) { if (hamburger) { hamburger.addEventListener('click', (e) => { + const expanded = hamburger.getAttribute('aria-expanded'); mobileNav.classList.toggle('active'); + hamburger.ariaExpanded = expanded === 'true' ? 'false' : 'true'; }); } diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index e536fdc3..48b1f751 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -98,7 +98,7 @@ /* ------------------------- */ /* Page header and footer */ -body > :is(header, footer) { +body footer { background-color: var(--color-card-background); } @@ -284,6 +284,23 @@ nav { transform: translateY(-50%); } +.report-navigation .hamburger { + padding: 1rem; + color: var(--color-text-lighter); +} + +.report-navigation .hamburger:is(:hover, :focus-visible) { + color: var(--color-text-darker); +} + +.report-navigation .hamburger:focus-visible { + outline: 1px solid var(--color-text-darker); +} + +.report-navigation .hamburger svg { + height: 1.75rem; +} + /* Page Filters */ #page-filters { padding: 1.5rem 1rem; diff --git a/templates/main.html b/templates/main.html index 8ff47c6a..29add03c 100644 --- a/templates/main.html +++ b/templates/main.html @@ -102,7 +102,7 @@
-