мобильное и настольное меню

Question

Я разрабатываю свое первое мобильное меню, и мне интересно, совместимо ли оно с шаблоном дизайна. Это мобильное первое простое меню с подменю.

Было бы здорово узнать, совместимо ли мое направление разработки этого меню с современными шаблонами проектирования, особенно с разработкой javascript. Потому что я хочу научиться хорошим привычкам сразу. Любые предложения будут оценены.

  //menu
  toggleBtn = document.querySelector('#toggleBtn');
  mainMenu = document.querySelector('#main-menu');

  toggleBtn.addEventListener('click', function(){
    if (mainMenu.style.display === 'block'){
      mainMenu.style.display = 'none';
    }else{
      mainMenu.style.display = 'block';
    }
  });

  //submenu
  btnArrotToggl = document.querySelector('#btnArrowToggl');
  subMenu = document.querySelector('#sub-main-menu');

  btnArrowToggle.addEventListener('click', function(){
    if ( subMenu.style.display === 'block'){
      subMenu.style.display = 'none';
    }else{
      subMenu.style.display = 'block';
    }
  });

  let onresize = function(e){
    width = e.target.outerWidth;
    height = e.target.outerHeight;

    if(width  >= 920){
        mainMenu.style.display = 'flex';
    }else{
      mainMenu.style.display = 'none';
    }

    if(width >= 920){
      subMenu.style.display = 'none';
    }
  };
  window.addEventListener("resize", onresize);

    /*mobile*/
      #main-menu {
        display: none;
        list-style-type: none;
      }
      #sub-main-menu{
        display: none;
      }
      /*tylko przycisk*/
      .subMenu {
        position: relative;
      }

      /*desktop*/
      @media screen and (min-width: 920px){
        #toggleBtn{
          display: none;
        }
        #main-menu {
          display: flex;
        }
        #main-menu > li {
          padding: 0 10px;
        }
        #main-menu > li > ul {
          display: none;
        }
        #main-menu > li:hover > ul {
          display: block !important;
        }
        #main-menu > li > ul {
          list-style-type: none;
          position: absolute;
          top: 20px;
          left: 10px;
          width: 200px;
          background: red;
          text-align: left;
          padding-left: 0;
        }
      }

<div class="navbar">
      <span id="toggleBtn">
        <a href="javascript:void(0)"><i class="fas fa-bars fa-2x"></i></a>
      </span>
      <span class="logo-container">
        <span class="nav-logo">
          <a href="index.html"><img src="images/logo.png" alt="logo" /></a>
        </span>
      </span>
        <ul id="main-menu">
          <li><a href="index.html">Page 1</a></li>
          <li class="subMenu"><a href="#">Page 2</a><a href="javascript:void(0)" id="btnArrowToggle"><i class="fas fa-angle-down"></i></a>
            <ul id="sub-main-menu">
              <li><a href="#">Sub page 1</a></li>
              <li><a href="#">Sub page 2</a></li>
              <li><a href="#">Sub page 3</a></li>
            </ul>
          </li>
          <li><a href="#">Page 3</a></li>
          <li><a href="#">Page 4</a></li>
          <li><a href="#">Page 5</a></li>
        </ul>
    </div>