document.addEventListener('DOMContentLoaded', () => {
    const navbarContainer = document.createElement('div');
    navbarContainer.id = 'navbar-container';
    document.body.insertBefore(navbarContainer, document.body.firstChild);
  
    fetch('../src/navbar.html')
      .then(response => response.text())
      .then(data => {
        navbarContainer.innerHTML = data;
  
        const themeBtn = document.querySelector('.theme-btn');
        const themeBall = document.querySelector('.theme-ball');
        const btnMenu = document.querySelector('.btn-menu');
        const sidebar = document.querySelector('.sidebar');
  
        if (btnMenu && sidebar) {
          btnMenu.addEventListener('click', () => {
            sidebar.classList.toggle('expand');
          });
        }
  
        if (themeBtn && themeBall) {
          const localData = localStorage.getItem('theme');
          if (localData === 'dark') {
            document.body.classList.add('dark-mode');
            themeBall.classList.add('dark');
          }
  
          themeBtn.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            themeBall.classList.toggle('dark');
            if (document.body.classList.contains('dark-mode')) {
              localStorage.setItem('theme', 'dark');
            } else {
              localStorage.setItem('theme', 'light');
            }
          });
        }
      })
      .catch(error => console.error('Error loading the navbar:', error));
  });