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">
<main>
  <header><button type="button" class="btn" id="toggle-aside"><i class="fa fa-bars"></i></button></header>

  <section>

    <aside>
      <header>
        <h3>Header</h3>
      </header>
      <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 sub-sub 3</a></li>
                    <li><a>Item 4 sub-sub 4</a></li>
                     <li><a>Item 4 sub-sub 5</a></li>
                      <li><a>Item 4 sub-sub 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
          
          <li class="first-menu"><a>Item 4</a>
            <ul>
              <li><a>item 5 sub 1</a></li>
              <li><a>Item 5 sub 2</a>
                <ul>
                  <li><a>Item 5 sub-sub 1</a></li>
                  <li><a>Item 5 sub-sub 2</a></li>
                   <li><a>Item 5 sub-sub 3</a></li>
                   ...

CSS

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



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

::-webkit-track {
  background: var(--memu-bg);
}

::-webkit-thumb {
  background: rgba(100, 100, 100, 0.4);
  border-radius: 0.25rem;
}

::-webkit-thumb-hover {
  background: rgba(100, 100, 100, 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: 20em;

  /* 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;
  overflow: hidden;
}

main {
  display: grid;
  grid-template-rows: 50px 1fr;
  background-color: #2196F3;
  border: 1px solid green;
  height: calc(100vh - 1px);
  width: 100vw;
  background-color: rgb(255, 255, 255);

}

main>header {
  display: flex;
  border: 1px solid red;
  flex: 0 0 auto;
}

section {
  display: grid;
  grid-template-columns: auto 1fr;
  border:1px solid blue;
  margin:0.5rem;
}

aside {
  position: relative;
  background-color: lightgrey;
  display: grid;
  grid-template-rows: auto 1fr;
  flex-direction: column;
  transition: transform 0.2s ease-in-out;
  transform: translateX(0);
  min-height: 0;
}


.aside-close aside {
  transform: translateX(-50px);
}

aside header {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.5rem;
}

aside header h3 {
  flex: 1 1 auto;
  font-size: 1rem;

}

aside>content ::-webkit-scrollbar {
  width: 0.25rem;
}


#list {
  display: flex;
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  width: 100%;
  width: fit-content;
  font-family: "Oswald";
  border-radius: var(--menu-border-radius);
...

JavaScript

const list = $("#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-aside').on('click', function() {
  $('body').toggleClass('aside-close');
});