<script defer>
  const sidebar = document.querySelector('#sidebar');
  const header = document.querySelector('#header');
  const path = window.location.pathname;
  const isHome = path === '/' || path === '/index.html';
  const isDesktop  = window.innerWidth >= 992;

  const handleScroll = () => {
    const fixedToc = document.querySelector('#fixed-toc');
    if(!isHome) {
      if (window.scrollY > 250 && window.innerWidth >= 1458) {
        fixedToc.style.display = 'block';
      } else {
        fixedToc.style.display = 'none';
      }
    }
  };
  window.addEventListener('scroll', handleScroll);


  const  closeSidebar = () => {
    const closeBtn = document.querySelector('#close-sidebar');
    closeBtn.addEventListener('click', () => {
      sidebar.classList.add('hidden');
      header.classList.remove('bottom');
    });
  }

  const openSidebar = () => {
    const openBtn = document.querySelector('#open-sidebar');
    openBtn.addEventListener('click', () => {
      sidebar.classList.remove('hidden');
      header.classList.add('bottom');
    });
  }

  const handleMobileSidebar = () => {
    if (!isHome && !isDesktop) {
      openSidebar()
      closeSidebar();
    }
  }

  document.addEventListener('DOMContentLoaded', handleMobileSidebar, false);

  const sidebarElements = document.querySelectorAll('.nav-list li a');
  sidebarElements.forEach((element) => {
    if (element.href === window.location.href) {
      element.classList.add('active');

      if (element.parentElement.parentElement.parentElement.tagName === 'DETAILS') {
        element.parentElement.parentElement.parentElement.open = true;
        element.parentElement.parentElement.parentElement.classList.add('active');
      }
    }
  });

</script>
