import { getDeviceState } from '../core/device';

// Toggle sidebar on click. Here, class "hide" open the sidebar
function toggleSidebar() {
  let sidebar = document.getElementById("sidebar-section");
  if (sidebar == null) {
    return
  }
  if (sidebar.classList.contains("hide")) {
    sidebar.classList.remove("hide")
  } else {
    // if toc-section is open, then close it first
    let toc = document.getElementById("toc-section");
    if (toc != null && toc.classList.contains("hide")) {
      toc.classList.remove("hide");
    }
    // add "hide" class
    sidebar.classList.add("hide");
    // if it is mobile device. then scroll to top.
    const { isMobile } = getDeviceState();
    if (isMobile && sidebar.classList.contains("hide")) {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
      if (document.getElementById("hero-area") != null) {
        document.getElementById("hero-area").classList.toggle("hide");
      }
    }
  }
  if (document.getElementById("content-section") != null) {
    document.getElementById("content-section").classList.toggle("hide");
  }
}

window.addEventListener('DOMContentLoaded', () => {
  // bind click event to #sidebar-toggler in navbar-2.html
  const $toggle = document.getElementById('sidebar-toggler');
  if ($toggle) $toggle.addEventListener('click', toggleSidebar);
});