santeh-ray/static/js/header-category-dropdown.js

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-category-dropdown]').forEach(function (dropdown) {
        const trigger = dropdown.querySelector('[data-category-trigger]');
        const label = dropdown.querySelector('[data-selected-label]');
        const valueInput = dropdown.querySelector('[data-category-value]');
        const menu = dropdown.querySelector('[data-category-menu]');
        const options = dropdown.querySelectorAll('[data-category-option]');

        if (!trigger || !label || !valueInput || !menu) {
            return;
        }

        const setExpanded = function (expanded) {
            trigger.setAttribute('aria-expanded', expanded ? 'true' : 'false');
            dropdown.classList.toggle('is-open', expanded);
        };

        const closeDropdown = function () {
            setExpanded(false);
        };

        const openDropdown = function () {
            setExpanded(true);
        };

        trigger.addEventListener('click', function (event) {
            event.preventDefault();
            if (dropdown.classList.contains('is-open')) {
                closeDropdown();
                return;
            }

            openDropdown();
        });

        options.forEach(function (option) {
            option.addEventListener('click', function () {
                label.textContent = option.dataset.label || option.textContent.trim();
                valueInput.value = option.dataset.value || '';
                closeDropdown();
            });
        });

        document.addEventListener('click', function (event) {
            if (!dropdown.contains(event.target)) {
                closeDropdown();
            }
        });

        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                closeDropdown();
            }
        });
    });
});