Vertical menu collapsible v2

by Plippie Plop

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="page-container">
  <div id="page-header"><button type="button" class="btn toggle-side-menu" data-menu="#side-menu-left"><i class="fa fa-bars"></i></button>
    <nav class="header-menu">
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
      </ul>
    </nav>
    <nav class="header-menu">
      <ul>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li class="more hidden" data-width="80">
      </ul>
    </nav>
  </div>

  <div id="main-container">
    <div id="side-menu-left">
      <header>
        <h3>Header</h3>
      </header>
      <div class="side-content">
        <nav id="list">
          <ul class="menu">
            <li class="first-menu"><a>Item 1</a></li>
            <li class="first-menu"><a>Item 2</a>
              <ul>
                <li><a>item 2 sub 1</a></li>
                <li><a>Item 2 sub 2</a></li>
              </ul>
            </li>
            <li class="first-menu"><a>Item 3</a>
              <ul>
                <li><a>item 3 sub 1</a></li>
                <li><a>Item 3 sub 2</a>
                  <ul>
                    <li><a>Item 2 sub-sub 1</a></li>
                    <li><a>Item 2 sub-sub 2</a></li>
                  </ul>
                </li>
                <li><a>Item 3 sub 3</a>
                <li><a>Item 3 sub 4</a>
                <li><a>Item 3 sub 5</a>
                <li><a>Item 3 sub 6</a>
              </ul>
            </li>
            <li class="first-menu"><a>Item 4</a>
              <ul>
                <li><a>item 4 sub 1</a></li>
                <li><a>Item 4 sub 2</a>
                  <ul>
                    <li><a>Item 4 sub-sub 1</a></li>
                    <li><a>Item 4 sub-sub 2</a></li>
                    <li><a>Item 4...

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Oswald&display=swap');


::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .4);
  border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.8);
}

:root {
  --menu-bg: rgb(250, 250, 250);
  --menu-item-bg: rgb(255, 255, 255);
  --menu-item-hover-bg: rgb(242, 242, 245);
  --menu-item-active-bg: rgb(124 192 251);
  --menu-item-active-hover-bg: rgb(171 214 251);
  --menu-color: rgb(20, 20, 20);
  --menu-active-color: rgb(255, 255, 255);
  --menu-border-radius: 0;
  --menu-sub-height: 30em;  
  --w-header-bg: rgb(52, 121, 180);

  /* using font awesome 4.7 for chevron icons */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
  position: relative;
  outline: none;
}

body {
  font-family: Oswald, Sans-Serif;
  overflow: hidden;
}

#page-container {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  background-color: rgb(255, 255, 255);
}

#page-header {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background-color: var(--w-header-bg);
}

#main-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
}

.toggle-side-menu {
  cursor: pointer;
  background-color: rgba(0, 0, 0, .2);
  color: white;
  border: 0;
  outline: 0;
  padding: 0.5rem 1.2rem;
}

.toggle-side-menu:hover {
  background-color: rgba(255, 255, 255, .1);
}

.header-menu,
.header-menu ul {
  display: flex;
  align-items: stretch;
}

.header-menu li {
  position: relative;
}

.header-menu li a {
  padding: 1rem 0.8rem;
  text-decoration: none;
  display: flex;
  align-items: stretch;
  color: white;
  white-space: nowrap;
}

.header-menu li a:hover {
  background-color: rgba(0, 0, 0, .2);
}

.header-menu:last-of-type {
 ...

JavaScript

const list = $("#list");
const fakelist = $('.w-list');

list.find('a').each(function(idx, elm) {
  console.log(idx, elm);
  $(elm).closest('li').attr('data-menu-index', idx);

  if ($(elm).closest('li').children('ul').length) {
    $(elm).closest('li').addClass('has-sub');
  }
  
  });


list.find('.active').parents('li').addClass('open').find('> a').addClass('active');


list.on('click', 'a', function(e) {
  let $this = $(this);

  if (!$this.hasClass('active')) {
    console.log("not active");

    list.find('.open').removeClass('open');
    list.find('.active').removeClass('active');

    $this.addClass('active').parents('li').addClass('open').find('> a').addClass('active');
  } else {
    console.log("IS active");
    $this.removeClass('active').closest('li').removeClass('open');
    $this.children('li').removeClass('open');
  }

});

$('.toggle-side-menu').on('click', function() {
  $('body').toggleClass('side-close');
});

fakelist.each(function(idx, elm){
let content = '<ul>';
for(var i= 1;i < 21;i++){
content += '<li>Item '+i+'</li>';
}
$(elm).append(content+'</ul>');
});