レスポンシブ時にハンバーガーメニューを作りたい

今、あるサイトを模写しているのですが、レスポンシブでハンバーガーメニューをクリックしたときに画像のようなメニューを作りたいのですが、何から始めていいのかわかりません。javascriptが必要でしょうか？

PCサイトは完成しました。

HTML
1<body>
2  <div class="header">
3  <header>
4   
5    <div class="page-header wrapper"> 
6        <h1>
7      <a href="index.html"><img class="logo" src="img/logo.png" alt="logo"></a>
8    </h1>
9    <nav>
10       <ul class="main-nav">
11        <li><a href="#top">TOP</a></li>            
12        <li><a href="#product">PRODUCT</a></li>
13        <li><a href="#about">ABOUT</a></li>
14        <li><a href="#news">NEWS</a></li>
15        <li><a href="#contact">CONTACT</a></li>
16      </ul>
17     </nav>
18        
19      </div>
20      <div class="m-mainvisual-arrow">
21        <p>&or;</p>
22      </div>
23  </header>
24コード

CSS
1.header {
2  overflow: hidden;
3  background-color: #f6f6f6;
4}
5header {
6 
7  background-image: url(img/main_visual.jpg);
8  
9  height: 550px;
10 min-height: 90vh;
11 min-width: 100vh;
12  background-size: cover;
13  background-position: center center;
14  background-repeat: no-repeat;
15  border-bottom-left-radius: 2000px 300px;
16  border-bottom-right-radius: 2000px 300px;
17    margin-left: -100px;
18  margin-right: -100px;
19  padding-left: 100px;
20  padding-right: 100px;
21  
22}
23a {
24  text-decoration: none;
25}
26header .logo {
27  width: 277px;
28  height: 72px;
29 margin-left: 30%;
30  margin-top: 20px;
31  transition: 0.5s;
32}
33.logo:hover {
34  opacity: 0.5;
35}
36.main-nav {
37  list-style: none;
38  display: flex;
39 text-transform: uppercase;
40  font-size: 14px;
41  margin-top: 70px;
42  padding-right: 20%;
43}
44.main-nav li {
45  padding-left: 40px;
46
47}
48.main-nav a {
49  color: white;
50  letter-spacing: 1.7px;
51  transition: 0.3s;
52 padding:10px 0;
53}
54.main-nav a:hover {
55  border-bottom:solid 2px white;
56}
57.page-header {
58  
59  display: flex;
60  justify-content: space-between;
61 
62}
63.m-mainvisual-arrow {
64   text-align: center;
65   padding-top: 25%;
66    color:white;
67  font-size:30px;
68}
69コード