Gyannetra_website/js/gn-mobile-nav.js

/**
 * GN Mobile Navigation - Isolated JavaScript
 * Fully functional mobile hamburger menu with dropdown support
 */
(function() {
  'use strict';

  // Cache DOM elements
  let gnMobileElements = null;  // Initialize mobile navigation
  function initGNMobileNav() {
    // Get DOM elements
    gnMobileElements = {
      hamburgerBtn: document.querySelector('.gn-mobile-hamburger__button'),
      overlay: document.querySelector('.gn-mobile-nav__overlay'),
      closeBtn: document.querySelector('.gn-mobile-nav__close'),
      dropdownToggles: document.querySelectorAll('.gn-mobile-nav__dropdown-toggle'),
      sublinks: document.querySelectorAll('.gn-mobile-nav__sublink'),
      body: document.body
    };

    // Check if required elements exist
    if (!gnMobileElements.hamburgerBtn || !gnMobileElements.overlay) {
      console.warn('GN Mobile Nav: Required elements not found');
      return;
    }

    // Bind events
    bindGNMobileNavEvents();
  }

  // Bind all mobile navigation events
  function bindGNMobileNavEvents() {
    // Hamburger button click
    gnMobileElements.hamburgerBtn.addEventListener('click', toggleGNMobileNav);

    // Close button click
    if (gnMobileElements.closeBtn) {
      gnMobileElements.closeBtn.addEventListener('click', closeGNMobileNav);
    }

    // Overlay click to close (clicking outside content)
    gnMobileElements.overlay.addEventListener('click', function(e) {
      if (e.target === gnMobileElements.overlay) {
        closeGNMobileNav();
      }
    });

    // Dropdown toggle functionality
    gnMobileElements.dropdownToggles.forEach(function(toggle) {
      toggle.addEventListener('click', function(e) {
        e.preventDefault();
        toggleGNMobileDropdown(this);
      });
    });

    // Close menu when clicking on sublinks
    gnMobileElements.sublinks.forEach(function(link) {
      link.addEventListener('click', function() {
        closeGNMobileNav();
      });
    });

    // Escape key to close menu
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape' && gnMobileElements.overlay.classList.contains('gn-mobile-nav--active')) {
        closeGNMobileNav();
      }
    });

    // Handle window resize
    window.addEventListener('resize', function() {
      if (window.innerWidth > 768 && gnMobileElements.overlay.classList.contains('gn-mobile-nav--active')) {
        closeGNMobileNav();
      }
    });
  }  // Toggle mobile navigation
  function toggleGNMobileNav(e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }

    const isActive = gnMobileElements.overlay.classList.contains('gn-mobile-nav--active');
    
    if (isActive) {
      closeGNMobileNav();
    } else {
      openGNMobileNav();
    }
  }

  // Open mobile navigation
  function openGNMobileNav() {
    gnMobileElements.hamburgerBtn.classList.add('gn-mobile-hamburger--active');
    gnMobileElements.overlay.classList.add('gn-mobile-nav--active');
    gnMobileElements.body.classList.add('gn-mobile-nav--no-scroll');

    // Set focus to close button for accessibility
    setTimeout(function() {
      if (gnMobileElements.closeBtn) {
        gnMobileElements.closeBtn.focus();
      }
    }, 100);
  }

  // Close mobile navigation
  function closeGNMobileNav() {
    gnMobileElements.hamburgerBtn.classList.remove('gn-mobile-hamburger--active');
    gnMobileElements.overlay.classList.remove('gn-mobile-nav--active');
    gnMobileElements.body.classList.remove('gn-mobile-nav--no-scroll');

    // Close all open dropdowns
    const expandedDropdowns = document.querySelectorAll('.gn-mobile-nav__item--dropdown.gn-mobile-nav--expanded');
    expandedDropdowns.forEach(function(dropdown) {
      dropdown.classList.remove('gn-mobile-nav--expanded');
      const toggle = dropdown.querySelector('.gn-mobile-nav__dropdown-toggle');
      if (toggle) {
        toggle.classList.remove('gn-mobile-nav--expanded');
      }
    });

    // Return focus to hamburger button
    setTimeout(function() {
      gnMobileElements.hamburgerBtn.focus();
    }, 100);
  }

  // Toggle dropdown within mobile navigation
  function toggleGNMobileDropdown(toggleElement) {
    const parentItem = toggleElement.closest('.gn-mobile-nav__item--dropdown');
    const isExpanded = parentItem.classList.contains('gn-mobile-nav--expanded');

    // Close all other dropdowns first
    const allDropdowns = document.querySelectorAll('.gn-mobile-nav__item--dropdown');
    allDropdowns.forEach(function(dropdown) {
      if (dropdown !== parentItem) {
        dropdown.classList.remove('gn-mobile-nav--expanded');
        const otherToggle = dropdown.querySelector('.gn-mobile-nav__dropdown-toggle');
        if (otherToggle) {
          otherToggle.classList.remove('gn-mobile-nav--expanded');
        }
      }
    });

    // Toggle current dropdown
    if (isExpanded) {
      parentItem.classList.remove('gn-mobile-nav--expanded');
      toggleElement.classList.remove('gn-mobile-nav--expanded');
    } else {
      parentItem.classList.add('gn-mobile-nav--expanded');
      toggleElement.classList.add('gn-mobile-nav--expanded');
    }
  }

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGNMobileNav);
  } else {
    initGNMobileNav();
  }

  // Expose functions globally for debugging (optional)
  window.GNMobileNav = {
    open: openGNMobileNav,
    close: closeGNMobileNav,
    toggle: toggleGNMobileNav
  };

})();