/ html / assets / js / navbar-expand-collapse.js
navbar-expand-collapse.js
 1  document.addEventListener("DOMContentLoaded", () => {
 2    const items = Array.from(document.querySelectorAll(".navbar-item"));
 3  
 4    items.forEach((item, i) => {
 5      const level = getLevel(item);
 6      const next = items[i + 1];
 7  
 8      if (next && getLevel(next) > level) {
 9        item.classList.add("has-children");
10  
11        const href = item.getAttribute("href");
12        const text = item.textContent;
13  
14        // Clear content and remove href from parent
15        item.textContent = "";
16        item.removeAttribute("href");
17  
18        const toggle = document.createElement("span");
19        toggle.className = "toggle-label";
20        toggle.textContent = text;
21        item.appendChild(toggle);
22  
23        // Mini-link button (arrow symbol)
24        const openBtn = document.createElement("a");
25        openBtn.className = "mini-link";
26        openBtn.href = href;
27        openBtn.target = item.getAttribute("target") || "_self";
28        openBtn.textContent = "➞"; // Changed arrow symbol
29        openBtn.style.display = "inline-block";
30        item.appendChild(openBtn);
31  
32        // Toggle event
33        toggle.addEventListener("click", (e) => {
34          e.preventDefault();
35          item.classList.toggle("open");
36  
37          let j = i + 1;
38          while (j < items.length && getLevel(items[j]) > level) {
39            const subItem = items[j];
40            const subLevel = getLevel(subItem);
41  
42            if (item.classList.contains("open")) {
43              subItem.style.display = subLevel === level + 1 ? "block" : "none";
44            } else {
45              subItem.style.display = "none";
46              subItem.classList.remove("open");
47            }
48            j++;
49          }
50        });
51  
52        // Start collapsed
53        let j = i + 1;
54        while (j < items.length && getLevel(items[j]) > level) {
55          items[j].style.display = "none";
56          j++;
57        }
58      }
59    });
60  
61    function getLevel(el) {
62      const cls = Array.from(el.classList).find(c => c.startsWith("level-"));
63      return cls ? parseInt(cls.split("-")[1]) : 0;
64    }
65  });