https://nask-nlp.github.io/nav.js

1/**
2 * nav.js
3 * Renders the shared nav into #nav-placeholder.
4 * Burger toggle is handled with a JS-controlled class (.nav-open)
5 * so desktop always shows the nav and mobile starts collapsed.
6 */
7
8const NAV_PAGES = [
9  { href: 'index.html',        label: 'home' },
10  { href: 'people.html',       label: 'people' },
11  { href: 'publications.html', label: 'publications' },
12  { href: 'positions.html',    label: 'jobs' },
13  { href: 'pllum.html',        label: 'PLLuM' },
14];
15
16const NAV_EXT = [
17  { href: 'https://github.com/NASK-NLP',  label: 'GitHub' },
18  { href: 'https://huggingface.co/NASK-PIB', label: 'HuggingFace' },
19];
20
21function renderNav() {
22  const el = document.getElementById('nav-placeholder');
23  if (!el) return;
24
25  const pageLinks = NAV_PAGES.map(p =>
26    `<li><a href="${p.href}">${p.label}</a></li>`
27  ).join('');
28
29  const extLinks = NAV_EXT.map(p =>
30    `<li><a href="${p.href}" class="nav-ext" target="_blank" rel="noopener noreferrer">${p.label}</a></li>`
31  ).join('');
32
33  el.innerHTML = `
34<div class="nav-wrapper">
35  <button class="nav-burger" aria-label="Toggle navigation" aria-expanded="false">☰ menu</button>
36  <nav aria-label="Main navigation">
37    <ul>
38      ${pageLinks}
39      ${extLinks}
40    </ul>
41  </nav>
42</div>`;
43
44  // Wire up burger toggle
45  const burger = el.querySelector('.nav-burger');
46  const nav    = el.querySelector('nav');
47
48  burger.addEventListener('click', () => {
49    const open = nav.classList.toggle('nav-open');
50    burger.setAttribute('aria-expanded', open);
51    burger.textContent = open ? '✕ close' : '☰ menu';
52  });
53
54  // Close menu when a nav link is clicked (mobile UX)
55  nav.querySelectorAll('a').forEach(a => {
56    a.addEventListener('click', () => {
57      nav.classList.remove('nav-open');
58      burger.setAttribute('aria-expanded', 'false');
59      burger.textContent = '☰ menu';
60    });
61  });
62}
63
64renderNav();
65
66