www_zola_template/static/js/main.js

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM loaded - initializing dark mode");
  
  const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcons = menuButton.querySelectorAll('svg');
  
  if (menuButton && mobileMenu) {
    menuButton.addEventListener('click', function() {
      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
      
      // Toggle aria-expanded
      menuButton.setAttribute('aria-expanded', !expanded);
      
      // Toggle menu visibility
      mobileMenu.classList.toggle('hidden');
      
      // Toggle icons
      menuIcons.forEach(icon => {
        icon.classList.toggle('hidden');
      });
    });
  }
  
  // Desktop dropdown menu
  const whyMenuButton = document.getElementById('why-menu-button');
  const desktopWhyMenu = document.getElementById('desktop-why-menu');
  
  if (whyMenuButton && desktopWhyMenu) {
    // Toggle on click
    whyMenuButton.addEventListener('click', function() {
      desktopWhyMenu.classList.toggle('hidden');
    });
    
    // Close when clicking outside
    document.addEventListener('click', function(event) {
      if (!whyMenuButton.contains(event.target) && !desktopWhyMenu.contains(event.target)) {
        desktopWhyMenu.classList.add('hidden');
      }
    });
    
    // Show on hover
    whyMenuButton.addEventListener('mouseenter', function() {
      desktopWhyMenu.classList.remove('hidden');
    });
    
    // Container for both button and menu for hover functionality
    const dropdownContainer = whyMenuButton.parentElement;
    
    // Hide on mouse leave from container
    dropdownContainer.addEventListener('mouseleave', function() {
      desktopWhyMenu.classList.add('hidden');
    });
  }
  
  // Mobile dropdown menu
  const mobileWhyMenuButton = document.querySelector('[x-data="{ open: false }"] button');
  const mobileWhyMenu = document.getElementById('mobile-why-menu');
  
  if (mobileWhyMenuButton && mobileWhyMenu) {
    mobileWhyMenuButton.addEventListener('click', function() {
      mobileWhyMenu.classList.toggle('hidden');
    });
  }

  // Theme toggle functionality
  const themeToggleBtn = document.getElementById('theme-toggle');
  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');

  // Check if dark mode is already enabled
  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
  
  console.log("Initial dark mode state:", isDarkMode);

  // Set initial theme
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
    if (themeToggleLightIcon && themeToggleDarkIcon) {
      themeToggleLightIcon.classList.remove('hidden');
      themeToggleDarkIcon.classList.add('hidden');
    }
  } else {
    document.documentElement.classList.remove('dark');
    if (themeToggleLightIcon && themeToggleDarkIcon) {
      themeToggleLightIcon.classList.add('hidden');
      themeToggleDarkIcon.classList.remove('hidden');
    }
  }

  // Toggle theme function
  function toggleTheme() {
    console.log("Toggle theme clicked");
    
    // Add transition class
    document.documentElement.classList.add('transition');
    
    // Toggle theme
    const isDark = document.documentElement.classList.contains('dark');
    console.log("Current dark mode:", isDark);
    
    if (isDark) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('color-theme', 'light');
      if (themeToggleLightIcon && themeToggleDarkIcon) {
        themeToggleLightIcon.classList.add('hidden');
        themeToggleDarkIcon.classList.remove('hidden');
      }
      console.log("Switched to light mode");
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('color-theme', 'dark');
      if (themeToggleLightIcon && themeToggleDarkIcon) {
        themeToggleLightIcon.classList.remove('hidden');
        themeToggleDarkIcon.classList.add('hidden');
      }
      console.log("Switched to dark mode");
    }
    
    // Remove transition class after transition completes
    setTimeout(() => {
      document.documentElement.classList.remove('transition');
    }, 300);
  }

  // Add event listeners to toggle buttons
  if (themeToggleBtn) {
    console.log("Adding event listener to theme toggle button");
    themeToggleBtn.addEventListener('click', toggleTheme);
  }
  
  if (mobileThemeToggleBtn) {
    console.log("Adding event listener to mobile theme toggle button");
    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
  }
});