ASP.NET Core navigation markers

readme.md

For the record, this is what Copilot recommended.

document.addEventListener('DOMContentLoaded', () => {
    const normalizePath = (path) => {
        if (!path) return '';
        const q = path.indexOf('?');
        const h = path.indexOf('#');
        const end = Math.min(q === -1 ? path.length : q, h === -1 ? path.length : h);
        let p = path.slice(0, end).toLowerCase();
        if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1);
        return p;
    };

    const currentPath = normalizePath(location.pathname);

    for (const link of document.querySelectorAll('.nav-link')) {
        let linkPath = '';

        if (link instanceof HTMLAnchorElement && link.pathname) {
            linkPath = normalizePath(link.pathname);
        } else {
            linkPath = normalizePath(link.getAttribute('href'));
        }

        const isActive = linkPath === currentPath;

        link.classList.toggle('border-dark', isActive);
        link.classList.toggle('border-bottom', isActive);
        link.classList.toggle('border-top', isActive);
        link.classList.toggle('text-dark', !isActive);
    }
});

site.js

// Karen uses this
document.addEventListener('DOMContentLoaded', () => {

    document.querySelectorAll('.nav-link').forEach(link => {

        link.classList.remove('border-bottom');
        link.classList.remove('border-top');

        if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
            link.classList.add('border-dark');
            link.classList.add('border-bottom');
            link.classList.add('border-top');
        } else {
            link.classList.add('text-dark');
        }
    });
});