rubberducky/milinda-pitch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update drawer and nav for imprints

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-16 11:58:43 +01:00
parent 7367127b50
commit 69c281b8bd
2 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/components/horizontal-scroll-nav.js
View File

@@ -7,14 +7,11 @@ class HorizontalScrollNav extends HTMLElement {
super(); super();
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.categories = [ this.categories = [
{ id: "all", label: "All", active: true }, { id: "asoka", label: "Asoka", active: true },
{ id: "fiction", label: "Fiction", active: false }, { id: "synthese", label: "Synthese", active: false },
{ id: "non-fiction", label: "Non-Fiction", active: false }, { id: "de-driehoek", label: "De Driehoek", active: false },
{ id: "mystery", label: "Mystery", active: false }, { id: "waerbeke", label: "Waerbeke", active: false },
{ id: "romance", label: "Romance", active: false }, { id: "stuivenberg", label: "Stuivenberg", active: false },
{ id: "sci-fi", label: "Sci-Fi", active: false },
{ id: "biography", label: "Biography", active: false },
{ id: "history", label: "History", active: false },
]; ];
} }
@@ -110,7 +107,7 @@ class HorizontalScrollNav extends HTMLElement {
background-color: #7a1843; background-color: #7a1843;
} }
</style> </style>
<nav class="nav-container" role="navigation" aria-label="Boekcategorieën"> <nav class="nav-container" role="navigation" aria-label="Imprints">
${this.categories ${this.categories
.map( .map(
(cat) => ` (cat) => `

9
js/components/mobile-drawer.js
View File

@@ -55,7 +55,7 @@ class MobileDrawer extends HTMLElement {
this.shadowRoot.querySelector(".drawer-container").classList.add("open"); this.shadowRoot.querySelector(".drawer-container").classList.add("open");
this.setAttribute("aria-hidden", "false"); this.setAttribute("aria-hidden", "false");
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
// Focus trap - focus first focusable element // Focus trap - focus first focusable element
setTimeout(() => { setTimeout(() => {
const closeBtn = this.shadowRoot.querySelector(".close-button"); const closeBtn = this.shadowRoot.querySelector(".close-button");
@@ -350,9 +350,10 @@ class MobileDrawer extends HTMLElement {
<h2 class="nav-section-title">Imprints</h2> <h2 class="nav-section-title">Imprints</h2>
<ul class="nav-list"> <ul class="nav-list">
<li><a href="#">Asoka</a></li> <li><a href="#">Asoka</a></li>
<li><a href="#">Bodhi</a></li> <li><a href="#">Synthese</a></li>
<li><a href="#">Dharma</a></li> <li><a href="#">De Driehoek</a></li>
<li><a href="#">Sangha</a></li> <li><a href="#">Waerbeke</a></li>
<li><a href="#">Stuivenberg</a></li>
</ul> </ul>
</div> </div>