Responsive Intro section with dropdown navigation using Flexbox

Community feedback

• 

  Shaxboz•1,230

  @shakhboz-shukhratPosted over 1 year ago

  Hello there👋! Congratulations on completing this challenge! The code seems to be functional and error-free, however, here are some suggestions for improvement:

  • Use const instead of let when declaring variables that don't need to be reassigned.
  • Instead of hard-coding media size 991, you can declare it as a constant for better readability.
  • Use descriptive function names for better code readability.
  • Avoid single-letter variable names, use descriptive names instead.

  Here is the updated code with the above suggestions applied:

  (() => {
    const openNavMenu = document.querySelector(".open-nav-menu");
    const closeNavMenu = document.querySelector(".close-nav-menu");
    const navMenu = document.querySelector(".nav-menu");
    const menuOverlay = document.querySelector(".menu-overlay");
    const MEDIA_SIZE = 991;
  
    openNavMenu.addEventListener("click", toggleNav);
    closeNavMenu.addEventListener("click", toggleNav);
    menuOverlay.addEventListener("click", toggleNav);
  
    function toggleNav() {
      navMenu.classList.toggle("open");
      menuOverlay.classList.toggle("active");
      document.body.classList.toggle("hidden-scrolling");
    }
  
    navMenu.addEventListener("click", (event) => {
      if (event.target.hasAttribute("data-toggle") && window.innerWidth <= MEDIA_SIZE) {
        event.preventDefault();
        const clickedMenuItem = event.target.parentElement;
        if (clickedMenuItem.classList.contains("active")) {
          collapseSubMenu();
        } else {
          if (navMenu.querySelector(".menu-item-has-children.active")) {
            collapseSubMenu();
          }
          clickedMenuItem.classList.add("active");
          const subMenu = clickedMenuItem.querySelector(".sub-menu");
          subMenu.style.maxHeight = subMenu.scrollHeight + "px";
        }
     }
    });
  
    function collapseSubMenu() {
      navMenu.querySelector(".menu-item-has-children.active .sub-menu").removeAttribute("style");
      navMenu.querySelector(".menu-item-has-children.active").classList.remove("active");
    }
  
    function fixOnResize() {
      if (navMenu.classList.contains("open")) {
        toggleNav();
      }
      if (navMenu.querySelector(".menu-item-has-children.active")) {
        collapseSubMenu();
      }
    }
  
    window.addEventListener("resize", function () {
      if (this.innerWidth > MEDIA_SIZE) {
        fixOnResize();
      }
    });
  })();
  

  Anyway, your solution is great. Hope you will find this helpful. Happy coding!

  0

  ---

  

  Clive Chambers•230

  @Clive-ChambersPosted over 1 year ago

  @Trueboss

  Hi and thanks for taking the time to review my code, i appreciate it! you mentioned "Avoid single-letter variable names, use descriptive names instead", just wanted to know where in the code you spotted any single-letter variable names? And the media size 991 wasn't hard coded?

  0