script.js

/**
 * file: script.js
 *
 * Global client-side JavaScript for the Levensloop application.
 * Handles UI interactions such as the responsive hamburger menu and dropdowns.
 */

document.addEventListener('DOMContentLoaded', () => {
    /**
     * Initializes the Hamburger Menu functionality.
     * Toggles the 'active' class on the main navigation menu when the hamburger icon is clicked.
     */
    const hamburgerMenu = document.getElementById('hamburger-menu');
    const mainNav = document.querySelector('.main-nav');

    if (hamburgerMenu && mainNav) {
        hamburgerMenu.addEventListener('click', (event) => {
            event.stopPropagation(); // Prevent this click from triggering document click
            mainNav.classList.toggle('active');
        });
    }

    /**
     * Initializes the Media Dropdown Menu functionality.
     * Toggles the 'open' class on the dropdown list item when the toggle link is clicked.
     * Closes the dropdown when clicking outside.
     */
    const mediaMenuToggle = document.getElementById('media-menu-toggle');
    const mediaDropdown = document.getElementById('media-dropdown');

    if (mediaMenuToggle && mediaDropdown) {
        mediaMenuToggle.addEventListener('click', (event) => {
            event.preventDefault(); // Prevent default link behavior
            event.stopPropagation(); // Prevent this click from triggering document click immediately

            const isOpen = mediaDropdown.classList.contains('open');

            // Toggle the open class
            if (isOpen) {
                mediaDropdown.classList.remove('open');
                mediaMenuToggle.setAttribute('aria-expanded', 'false');
            } else {
                mediaDropdown.classList.add('open');
                mediaMenuToggle.setAttribute('aria-expanded', 'true');
            }
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', (event) => {
            if (mediaDropdown.classList.contains('open') && !mediaDropdown.contains(event.target)) {
                mediaDropdown.classList.remove('open');
                mediaMenuToggle.setAttribute('aria-expanded', 'false');
            }

            // Also close the mobile menu if clicking outside of it (optional but good UX)
            // Checking if mainNav is active and click is outside mainNav and hamburger
            if (mainNav && mainNav.classList.contains('active') &&
                !mainNav.contains(event.target) &&
                !hamburgerMenu.contains(event.target)) {
                // mainNav.classList.remove('active'); // Commented out to be safe with existing behavior, strictly addressing Media dropdown
            }
        });
    }
});