ハンバーガーメニューのリストを表示したい

現在、ハンバーガーメニューの三本線は表示できたのですが、
押してもxに切り替わるだけで、表示したいメニューが表示できません。

ruby:/index.scss
1@media screen and (max-width: 1199px) {
2  .hamburger {
3    display: block;
4    position: absolute;
5    right: 10px;
6    top: 10%;
7    width: 50px;
8    height: 80px;
9    cursor: pointer;
10    &.active span:nth-of-type(1) { //クリックしたら☓ボタンになるように切り替え真ん中の線を消して、上下の線を☓にする。
11      transform: rotate(45deg);
12      top: 20px;
13    }
14    &.active span:nth-of-type(2) { //真ん中の線を透過
15      width: 0;
16      left: 50%;
17    }
18    &.active span:nth-of-type(3) {
19      transform: rotate(-45deg);
20      top: 20px;
21    }
22  }
23
24  nav {
25    display: none; //ブラウザが縮小した時に消去
26    position: fixed;
27    top: 0px;
28    right: -200px;
29    width: 180px;
30    height: 100%;
31    padding: 40px 30px 0 0;
32    opacity: 0;
33    transition: 0.4s;
34    visibility: hidden;
35    background-color: #ddd;
36    text-align: center; 
37    z-index: -1;
38    &.active {
39      opacity: 1;
40      visibility: visible;
41      right: 0;
42    }
43  }
44  
45  .nav-button {
46    display: inline-block;
47    position: relative;
48    width: 30px;
49    height: 26px;
50
51    span { //三本線の幅など
52      display: inline-block;
53      position: absolute;
54      left: 0;
55      width: 100%;
56      height: 4px;
57      background-color: #fff;
58
59      &:nth-of-type(1) {
60        top: 0;
61      }
62
63      &:nth-of-type(2) {
64        top: 11px;
65      }
66
67      &:nth-of-type(3) {
68        bottom: 0;
69      }
70    }
71  }
72}

上記該当のscssになります。

ruby:/index.html.haml
1.Main
2  .Main__header
3    .Main__header__nav
4      %h1 エンジニアのための本
5      .hamburger
6        .nav-button
7          = link_to ""
8          %span
9          %span
10          %span
11      %nav
12        %ul.menu
13          %li 
14            フロントエンド
15            %ul.sub
16              %li
17                = link_to "①HTML", card_category_path(:card_id ,1)
18              %li
19                = link_to "②CSS", card_category_path(:card_id, 2)
20              %li
21                = link_to "③Javascript", card_category_path(:card_id, 3)
22          %li
23            バックエンド
24            %ul.sub
25              %li
26                = link_to "④Java", card_category_path(:card_id, 4)
27              %li
28                = link_to "⑤PHP", card_category_path(:card_id, 5)
29              %li
30                = link_to "⑥Python", card_category_path(:card_id, 6)
31              %li
32                = link_to "⑦Ruby", card_category_path(:card_id, 7)
33          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
34            = f.text_field :keyword, placeholder: "検索", class: "search-top"
35            = f.submit "検索", class: "search-top"

このようになっています。

javascriptは

ruby:/hamburger.js
1document.addEventListener('DOMContentLoaded', function() {
2  document.getElementsByClassName("hamburger")[0].addEventListener('click', function() {
3    this.classList.toggle("active");
4    document.getElementsByClassName("sub")[0].classList.toggle("active");
5  })
6});