schneidmaster/gitreports.com

View on GitHub
app/assets/javascripts/nav.js

Summary

Maintainability
A
0 mins
Test Coverage
document.addEventListener("DOMContentLoaded", () => {
  // Navbar and dropdowns
  const toggle = document.getElementsByClassName("navbar-toggle")[0];
  const collapse = document.getElementsByClassName("navbar-collapse")[0];
  const dropdowns = Array.from(document.getElementsByClassName("dropdown"));

  // Toggle if navbar menu is open or closed
  const toggleMenu = () => {
    collapse.classList.toggle("collapse");
    collapse.classList.toggle("in");
  };

  // Close all dropdown menus
  const closeMenus = () => {
    dropdowns.forEach(dropdown => {
      dropdown
        .getElementsByClassName("dropdown-toggle")[0]
        .classList.remove("dropdown-open");
      dropdown.classList.remove("open");
    });
  };

  // Add click handling to dropdowns
  dropdowns.forEach(dropdown => {
    dropdown.addEventListener("click", () => {
      if (document.body.clientWidth < 768) {
        const open = this.classList.contains("open");
        closeMenus();
        if (!open) {
          this.getElementsByClassName("dropdown-toggle")[0].classList.toggle(
            "dropdown-open"
          );
          this.classList.toggle("open");
        }
      }
    });
  });

  // Close dropdowns when screen becomes big enough to switch to open by hover
  const closeMenusOnResize = () => {
    if (document.body.clientWidth >= 768) {
      closeMenus();
      collapse.classList.add("collapse");
      collapse.classList.remove("in");
    }
  };

  // Event listeners
  window.addEventListener("resize", closeMenusOnResize, false);
  toggle.addEventListener("click", toggleMenu, false);
});