前提・実現したいこと

ハンバーガーメニューでページ内リンクをクリックした時、メニュー画面が閉じるようにしたい。

発生している問題・エラーメッセージ

リンクをクリックするとセクションには飛びますが、メニュー画面が表示されたままです。

###試してみた事
ページ内リンクで検索したものをいろいろコピーして貼り付けしてみましたが、動かず、過去のものも確認してみたのですが、初心者の為どの部分をどこに貼り付けたらいいのかがわかりません。

該当のソースコード

HTML
1<html>
2<body>
3  <header class="header">
4    <div class="nav-bar">
5    <div class="header-logo"> 
6     <a href="index.html"><img src="image/logo.png" alt="会社ロゴ"></a>
7    </div>
8    <nav class="nav">
9       <ul class="nav-list" id="menu">
10         <li class="nav-item"><a href="#service">SERVICE</a></li>
11         <li class="nav-item"><a href="#company">COMPANY</a></li>
12         <li class="nav-item"><a href="#MANAGEMENT TEAM">MANAGEMENT TEAM</a></li>
13         <li class="nav-item"><a href="#contact">CONTACT</a></li>
14       </ul>
15      </nav>
16    </div>
17    <div class="hamburger" id="js-hamburger">
18      <span class="hamburger_border hamburger_border_top"></span>
19      <span class="hamburger_border hamburger_border_center"></span>
20      <span class="hamburger_border hamburger_border_bottom"></span>
21    </div>
22    <div class="black_bg" id="js-black-bg"></div>
23  </header>
24     <script>
25    function toggleNav() {
26  var body = document.body;
27  var hamburger = document.getElementById('js-hamburger');
28  var blackBg = document.getElementById('js-black-bg');
29
30  hamburger.addEventListener('click', function() {
31    body.classList.toggle('nav-open');
32  });
33  blackBg.addEventListener('click', function() {
34    body.classList.remove('nav-open');
35  });
36}
37    </script>
38</body>
39</html>

CSS
1@media screen and (max-width:800px){
2    body{
3        margin: 0;
4        font-size: 15px;
5    }
6    .header{
7        left:0;
8        top:0;
9        width: 100%;
10        height:70px;
11      }
12    .header-logo{
13        width: 100%;
14        text-align: center;
15        margin: 0;
16        height: 70px;
17    }
18   
19    .header-logo img{
20        position: absolute;
21        top:0;
22        left:0;
23        right: 0;
24        bottom:0;
25        margin: auto;
26         width: 23vh;
27         height: auto;
28         
29        }
30    .nav-bar{
31        display: block;
32        position: relative;
33        display: block;
34        width: 100%;
35        height: 70px;
36        
37    }
38    .nav{
39        position: fixed;
40        right: -320px;
41        top:0;
42        width: 300px;
43        height:100vh;
44        padding-top: 60px;
45        background-color: gray;
46        transition: all .6s;
47        z-index:200;
48        overflow-y: auto;
49        margin: 0;
50      }
51    .nav-list{
52        display: block;
53        margin: 0;
54        padding: 0;
55      }
56      .nav-item{
57        text-align: center;
58        padding:0;
59      }
60      .nav-item a{
61        display: block;
62        padding:10px 0;
63        color:#fff;
64        font-size:1.2em ;
65        line-height: normal;
66        letter-spacing: 1px;
67      }
68      .nav_item a:hover{
69        background-color: #eee;
70      }
71      .nav-item a::after{
72        display: none;
73      }
74      .hamburger{
75        position: absolute;
76        right: 15px;
77        top:8px;
78        width: 40px;
79        height: 40px;
80        cursor:pointer;
81        z-index: 300;
82      }
83     .hamburger_border{
84        position: absolute;
85        left:11px;
86        width: 18px;
87        height: 2px;
88        background-color: #333333;
89        transition: all .6s;
90      }
91      .hamburger_border_top{
92        top:14px;
93      }
94      .hamburger_border_center{
95        top:20px;
96      }
97      .hamburger_border_bottom{
98        top:26px;
99      }
100      .black_bg{
101        position: fixed;
102        left:0;
103        top:0;
104        width: 100vw;
105        height: 100vh;
106        z-index: 100;
107        background-color: #333333;
108        opacity: 0.5;
109        visibility: hidden;
110        transition: all .6s;
111        cursor: pointer;
112      }
113      .nav-open .nav{
114        right:0;
115      }
116      .nav-open .black_bg{
117        opacity: .8;
118        visibility: visible;
119      }
120      .nav-open .hamburger_border_top{
121        transform: rotate(45deg);
122        top:20px;
123      }
124      .nav-open .hamburger_border_center{
125        width: 0;
126        left:50%;
127      }
128      .nav-open .hamburger_border_bottom{
129        transform: rotate(-45deg);
130        top:20px;
131      }