upskill-event-manager/assets/js/hvac-mobile-nav.js

/**
 * HVAC Community Events Mobile Navigation
 * 
 * This script handles the mobile navigation functionality including:
 * - Creating mobile menu from existing navigation elements
 * - Toggle functionality for mobile menu
 * - Highlighting active menu items
 * - Handling page-specific navigation setups
 */

(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Mobile navigation setup
        function setupMobileNavigation() {
            // Target pages that need mobile navigation
            const dashboardPage = document.querySelector('.hvac-dashboard');
            const eventSummaryPage = document.querySelector('.hvac-event-summary-wrapper');
            const emailAttendeesPage = document.querySelector('.hvac-email-attendees-wrapper');
            
            // Only run on pages with these elements
            if (!dashboardPage && !eventSummaryPage && !emailAttendeesPage) {
                return;
            }
            
            // Find the appropriate existing navigation element
            let existingNav = null;
            let headerElement = null;
            let pageType = '';
            
            if (dashboardPage) {
                existingNav = document.querySelector('.hvac-dashboard-nav');
                headerElement = document.querySelector('.hvac-dashboard-header');
                pageType = 'dashboard';
            } else if (eventSummaryPage) {
                existingNav = document.querySelector('.hvac-event-summary-actions');
                headerElement = document.querySelector('.hvac-event-summary-header');
                pageType = 'event-summary';
            } else if (emailAttendeesPage) {
                existingNav = document.querySelector('.hvac-email-navigation');
                headerElement = document.querySelector('.hvac-email-header');
                pageType = 'email-attendees';
            }
            
            // If no existing navigation found, exit
            if (!existingNav || !headerElement) {
                return;
            }
            
            // Create mobile nav container
            const mobileNavContainer = document.createElement('div');
            mobileNavContainer.className = 'hvac-mobile-nav-container';
            
            // Create toggle button
            const toggleButton = document.createElement('button');
            toggleButton.className = 'hvac-mobile-nav-toggle';
            toggleButton.setAttribute('aria-label', 'Toggle navigation menu');
            toggleButton.setAttribute('aria-expanded', 'false');
            toggleButton.innerText = 'Menu';
            
            // Create mobile nav menu
            const mobileNav = document.createElement('nav');
            mobileNav.className = 'hvac-mobile-nav';
            mobileNav.setAttribute('aria-label', 'Mobile navigation');
            
            // Create list of menu items by cloning original nav links
            const navList = document.createElement('ul');
            const links = existingNav.querySelectorAll('a');
            
            links.forEach(link => {
                const listItem = document.createElement('li');
                const newLink = link.cloneNode(true);
                
                // Highlight active page in mobile nav
                if (newLink.getAttribute('href') === window.location.pathname ||
                    newLink.getAttribute('href') === window.location.href) {
                    newLink.classList.add('active');
                }
                
                listItem.appendChild(newLink);
                navList.appendChild(listItem);
            });
            
            mobileNav.appendChild(navList);
            
            // Add components to container
            mobileNavContainer.appendChild(toggleButton);
            mobileNavContainer.appendChild(mobileNav);
            
            // Insert container after the header
            headerElement.after(mobileNavContainer);
            
            // Toggle button functionality
            toggleButton.addEventListener('click', function() {
                const isOpen = mobileNav.classList.contains('open');
                
                if (isOpen) {
                    mobileNav.classList.remove('open');
                    toggleButton.classList.remove('active');
                    toggleButton.setAttribute('aria-expanded', 'false');
                } else {
                    mobileNav.classList.add('open');
                    toggleButton.classList.add('active');
                    toggleButton.setAttribute('aria-expanded', 'true');
                }
            });
            
            // Close menu when a link is clicked
            mobileNav.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', function() {
                    mobileNav.classList.remove('open');
                    toggleButton.classList.remove('active');
                    toggleButton.setAttribute('aria-expanded', 'false');
                });
            });
            
            // Close menu when clicking outside
            document.addEventListener('click', function(event) {
                if (!mobileNavContainer.contains(event.target)) {
                    mobileNav.classList.remove('open');
                    toggleButton.classList.remove('active');
                    toggleButton.setAttribute('aria-expanded', 'false');
                }
            });
            
            // Add keyboard navigation
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && mobileNav.classList.contains('open')) {
                    mobileNav.classList.remove('open');
                    toggleButton.classList.remove('active');
                    toggleButton.setAttribute('aria-expanded', 'false');
                    toggleButton.focus();
                }
            });
        }
        
        // Run setup
        setupMobileNavigation();
    });
})();