https://mentalhealthfirstaid.org/app/themes/mentalhe180/assets/js/magic-line.js?ver=1787939950

1document.addEventListener("DOMContentLoaded", () => {
2    const menu = document.querySelector(".custom-menu");
3    const items = document.querySelectorAll(".custom-menu-item");
4    const indicator = document.querySelector(".menu-indicator");
5
6    if (!menu || !indicator || items.length === 0) return;
7
8    let activeItem = null;
9
10    items.forEach(item => {
11        const link = item.querySelector("a");
12        if (!link) return;
13
14        const linkHref = link.href.replace(/\/$/, ''); // normalize trailing slash
15        const currentHref = window.location.href.replace(/\/$/, '');
16
17        if (currentHref.includes(linkHref)) {
18            activeItem = item;
19            item.classList.add("is-current");
20        }
21    });
22
23    if (!activeItem) {
24        activeItem = items[0];
25        activeItem.classList.add("is-current");
26    }
27
28    moveIndicator(activeItem);
29
30    items.forEach(item => {
31        item.addEventListener("mouseenter", () => moveIndicator(item));
32        item.addEventListener("focusin", () => moveIndicator(item));
33    });
34
35    menu.addEventListener("mouseleave", () => moveIndicator(activeItem));
36
37    function moveIndicator(item) {
38        const rect = item.getBoundingClientRect();
39        const menuRect = menu.getBoundingClientRect();
40        indicator.style.width = `${rect.width}px`;
41        indicator.style.left = `${rect.left - menuRect.left}px`;
42    }
43});