ハンバーガーメニューが開くがnavが映らない

ハンバーガーメニューを開いたときにnavが映らないです

模写コーディングでハンバーガーメニュに取り組んでいるときにいざ開いてみても#maskしか反応してない模様です

該当のソースコード

html
1$(function(){
2  $('.toogle-btn').on('click',　function() {
3    if　($('#header').hasClass('open')) {
4      $('#header').removeClass('open');
5    } else {
6      $('#header').addClass('open');
7    }
8  });
9
10  $('#mask').on('click',　function() {
11    $('#header').removeClass('open')
12  });
13});
14
15
16
17----------------css------------------
18@charset "UTF-8";
19html {
20  font-size: 100%;
21}
22img {
23  max-width: 100%;
24}
25body {
26  letter-spacing: 0.1em;
27  color: #000;
28  font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
29}
30li {
31  list-style: none;
32}
33a {
34  text-decoration: none;
35  color: #000;
36}
37.site-title {
38  width: 100px;
39  margin-left: 50px;
40  margin-top: 40px;
41}
42/*=======hrader========*/
43#header {
44  width: 100%;
45  height: 100px;
46  display: flex;
47  justify-content: space-between;
48}
49/*-------nav-------*/
50#header .navi {
51  text-align: center;
52  padding-top: 80px;
53  position: fixed;
54  top: 0;
55  left:-300px;
56  width: 300px;
57  z-index: 20;
58  opacity: 0;
59  transition: all 0.5s;
60}
61#header .navi a {
62  color: white;
63  font-size: 16px;
64  font-weight: 700;
65}
66#header .navi li {
67  margin-bottom: 30px;
68}
69.open #header .navi {
70  left: 0;
71  opacity: 1;
72}
73/*-------hbg_menu-------*/
74#header .header-content {
75  width: 100%;
76  height: 100%;
77  position: relative;
78}
79#header .hbg-menu {
80  display: flex;
81  align-items: center;
82  width: 100px;
83  height: 100px;
84  cursor: pointer;
85  z-index: 10;
86  background-color: #fe2a2a;
87  position: absolute;
88  top: 0;
89  right: 0;
90}
91#header .hbg-line {
92  display: block;
93  margin: 0 auto;
94  width: 50px;
95  height: 2px;
96  border-radius: 2px;
97  background-color: white;
98  position: relative;
99  transition: all 0.5s;
100}
101#header .hbg-line::before,
102#header .hbg-line::after {
103  content: '';
104  display: block;
105  width: 50px;
106  height: 2px;
107  border-radius: 2px;
108  background-color: white;
109  position: absolute;
110  transition: all 0.5s;
111}
112#header .hbg-line::before {
113  transform: translateY(-12px);
114}
115#header .hbg-line::after {
116  transform: translateY(12px);
117}
118.open #header .hbg-line {
119  background-color: transparent;
120}
121.open #header .hbg-line::before {
122  transform: rotate(45deg);
123}
124.open #header .hbg-line::after {
125  transform: rotate(-45deg);
126}
127#mask {
128  display: none;
129  transition: all .5s;
130}
131.open #mask{
132  display: block;
133  position: fixed;
134  top: 0;
135  left: 0;
136  width: 100%;
137  height: 100vh;
138  background-color: #fe2a2a;
139  z-index: 10;
140  cursor: pointer;
141}
142-----------------jquery-----------------
143
144'use strict';
145
146$(function(){
147  $('.hbg-menu').on('click',function(){
148    if($('#header').hasClass('open')){
149      $('#header').removeClass('open');
150    }else{
151      $('#header').addClass('open');
152    }
153  });
154
155  $('#mask').on('click',function(){
156    $('#header').removeClass('open')
157  });
158});
159