eis-website/js/navbar.js

// ====================== NAVBAR COMPONENT LOADER ======================

/**
 * Determine the correct path to the navbar component based on current page
 */
function getNavbarPath() {
  const path = window.location.pathname;
  // Check if we're in a subdirectory
  if (path.includes('/notenrechner') || path.includes('/textanalyse')) {
    return '../components/navbar.html';
  }
  return 'components/navbar.html';
}

/**
 * Load the navbar component into the page
 */
async function loadNavbar() {
  try {
    const navbarPath = getNavbarPath();
    const response = await fetch(navbarPath);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const html = await response.text();
    
    // Insert navbar at the beginning of body
    document.body.insertAdjacentHTML('afterbegin', html);
    
    // Set the active nav link based on current page
    setActiveNavLink();
    
    // Initialize navbar functionality
    initializeNavbar();
    
    // Initialize dark mode
    initializeDarkMode();
    
  } catch (error) {
    console.error('Error loading navbar:', error);
    // Fallback: Create a basic navbar if loading fails
    createFallbackNavbar();
  }
}

/**
 * Set the active class on the current page's nav link
 */
function setActiveNavLink() {
  const currentPage = window.location.pathname.split('/').pop() || 'index.html';
  const navLinks = document.querySelectorAll('.nav-link');
  
  navLinks.forEach(link => {
    const href = link.getAttribute('href');
    if (href === currentPage || (currentPage === '' && href === 'index.html')) {
      link.classList.add('active');
    }
  });
}

/**
 * Initialize navbar interactions (hamburger menu, dropdown)
 */
function initializeNavbar() {
  const hamburger = document.querySelector('.hamburger');
  const navMenu = document.querySelector('.nav-menu');
  const dropdownToggle = document.querySelector('.dropdown-toggle');
  const dropdownSubmenu = document.querySelector('.dropdown-submenu');

  // Mobile hamburger menu toggle
  if (hamburger && navMenu) {
    hamburger.addEventListener('click', () => {
      navMenu.classList.toggle('active');
    });

    // Close menu when a nav link is clicked
    document.querySelectorAll('.nav-menu .nav-link').forEach(link => {
      link.addEventListener('click', (e) => {
        // Don't close for the dropdown toggle
        if (link.classList.contains('dropdown-toggle')) {
          return;
        }
        navMenu.classList.remove('active');
      });
    });
  }

  // Dropdown menu toggle
  if (dropdownToggle && dropdownSubmenu) {
    dropdownToggle.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      dropdownSubmenu.classList.toggle('show');
    });

    // Close dropdown when a submenu link is clicked
    dropdownSubmenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        dropdownSubmenu.classList.remove('show');
        navMenu.classList.remove('active');
      });
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.dropdown-menu-item')) {
        dropdownSubmenu.classList.remove('show');
      }
    });
  }
}

/**
 * Initialize Dark Mode functionality
 */
function initializeDarkMode() {
  const toggle = document.getElementById('dark-mode-toggle');

  if (!toggle) return;

  // Restore saved dark mode state on page load
  if (localStorage.getItem('darkMode') === 'true') {
    document.documentElement.setAttribute('data-theme', 'dark');
    document.body.classList.add('dark');
    toggle.textContent = '☀️ Light Mode';
  }

  // Toggle dark mode on button click
  toggle.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    
    const isDark = document.body.classList.toggle('dark');
    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
    
    localStorage.setItem('darkMode', isDark);
    toggle.textContent = isDark ? '☀️ Light Mode' : '🌙 Dark Mode';
  });
}

/**
 * Fallback navbar creation if component loading fails
 */
function createFallbackNavbar() {
  console.warn('Using fallback navbar creation');
  // This can be implemented if needed
}

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