https://www.aev-panther.de/assets/controllers/desktop_nav_controller-UJZmQzw.js

1import {Controller} from '@hotwired/stimulus';
2
3/**
4 * Marks the current page link as active in the desktop navbar.
5 * If a dropdown-item matches, the parent nav-link is also marked active.
6 *
7 * Usage: <div data-controller="desktop-nav">...</div>
8 */
9export default class extends Controller {
10    connect() {
11        const currentPath = window.location.pathname;
12
13        this.element.querySelectorAll('.dropdown-item').forEach(link => {
14            const linkPath = new URL(link.href, window.location.origin).pathname;
15            if (linkPath === currentPath) {
16                link.classList.add('active');
17
18                // Mark parent nav-link (dropdown toggle) as active too
19                const navLink = link.closest('.nav-link-box')?.querySelector('.nav-link');
20                if (navLink) navLink.classList.add('active');
21            }
22        });
23
24        this.element.querySelectorAll('.nav-link').forEach(link => {
25            if (link.classList.contains('active')) return; // already set above
26            const linkPath = new URL(link.href, window.location.origin).pathname;
27            if (linkPath === currentPath) {
28                link.classList.add('active');
29            }
30        });
31    }
32}