74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import { el } from "../core/dom.js";
|
||
|
||
const navbarMobile = () => document.getElementById("navbar-mobile");
|
||
const openButton = () => document.getElementById("button-mobile");
|
||
|
||
// Mobile bar: open/close buttons and closing on outside click.
|
||
export function setupMobileNavbar() {
|
||
const navbar = navbarMobile();
|
||
const button = openButton();
|
||
const links = document.getElementById("navbar-mobile-links");
|
||
|
||
const toggle = () => {
|
||
navbar.classList.toggle("inactive");
|
||
button.classList.toggle("inactive");
|
||
};
|
||
|
||
document.addEventListener("click", (e) => {
|
||
if (!e.target.closest("#navbar-mobile") && !e.target.closest("#button-mobile") && !navbar.classList.contains("inactive")) {
|
||
navbar.classList.add("inactive");
|
||
button.classList.remove("inactive");
|
||
}
|
||
});
|
||
|
||
const closeButton = el("button", "button-mobile navbar", "");
|
||
links.appendChild(closeButton);
|
||
closeButton.addEventListener("click", toggle);
|
||
|
||
button.textContent = "";
|
||
button.addEventListener("click", toggle);
|
||
}
|
||
|
||
export function hideMobileNavbar() {
|
||
navbarMobile().classList.add("inactive");
|
||
}
|
||
|
||
// Desktop sidebar navigation and mobile bar links, filled together.
|
||
export function createNavbar() {
|
||
const desktop = document.getElementById("navbar");
|
||
const mobile = document.getElementById("navbar-mobile-links");
|
||
|
||
return {
|
||
addGroup(title) {
|
||
desktop.appendChild(el("li", "navbar-group", title));
|
||
},
|
||
|
||
addEntry(title, id, index) {
|
||
addDesktopEntry(desktop, title, id, index);
|
||
addMobileEntry(mobile, title, id);
|
||
}
|
||
};
|
||
}
|
||
|
||
function addDesktopEntry(navbar, title, id, index) {
|
||
const item = el("li", "navbar-item");
|
||
navbar.appendChild(item);
|
||
|
||
const link = el("a", "nav-link");
|
||
link.href = `#${id}`;
|
||
link.dataset.target = id;
|
||
item.appendChild(link);
|
||
|
||
link.appendChild(el("span", "idx", String(index).padStart(2, "0") + " "));
|
||
link.appendChild(document.createTextNode(title));
|
||
}
|
||
|
||
function addMobileEntry(navbar, title, id) {
|
||
const item = el("li", "navbar-item-mobile");
|
||
navbar.appendChild(item);
|
||
|
||
const link = el("a", "nav-link-mobile", title);
|
||
link.href = `#${id}`;
|
||
item.appendChild(link);
|
||
}
|