ハンバーガーメニューを作りたいのですが、一部のjQueryしか動きません。

実現したいこと

メニューボタンを押すとすべてのJQueryが動くようにしたい。
検証で見たときの、is-activeの部分のCSSをしっかり反映させたいです。

ハンガーガーの✕ボタンの動きだけは反映されています。

is-activeを使わないで簡単なjQueryを書いた場合は反映されました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <header>
12        <div class="head-container">
13            <div class="logo"><img src="1\logo.svg" alt=""></div>
14            <div class="menu"><span></span><span></span><span></span></div>
15            
16        </div>
17        <nav class="menu-in">
18            <ul>
19                <li>PICK UP</li>
20                <li>FEATURE</li>
21                <li>CONTACT</li>
22            </ul>
23            <ul>
24                <li>Twitter</li>
25                <li>facebook</li>
26                <li>instagram</li>
27                
28            </ul>
29        </nav>
30        <div id="mask"></div>
31    </header>
32
33    
34   
35
36
37    
38    <script
39    src="https://code.jquery.com/jquery-3.6.4.min.js"
40    integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
41    crossorigin="anonymous"></script>
42      <script src="main.js"></script>  
43</body>
44</html>

CSS
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7header {
8    width: 100%;
9    padding: 20px 40px;
10    margin: 0 auto;
11    position: relative;
12    position: fixed;
13    z-index: 100;
14}
15
16.head-container {
17    display: flex;
18    justify-content: space-between;
19    align-items: center;
20    
21}
22
23.menu {
24    width: 50px;
25    height: 50px;
26    position: relative;
27}
28
29.menu span {
30    position: absolute;
31    top: 0;
32    left: 0;
33    display: block;
34    border: solid 1px black;
35    width: 50%;
36    
37
38}
39
40
41span:nth-child(1){
42    transform: rotate(0deg);
43    top: 20px;
44    transition: 0.5s;
45}
46span:nth-child(2){
47    top: 30px;
48}
49span:nth-child(3){
50    transform: rotate(0deg);
51    top: 40px;
52    transition: 0.5s;
53}
54
55.is-active span:nth-child(1){
56    transform: rotate(315deg);
57    top:50%;
58    left: 0;
59    color: white;
60    transition: 0.5s;
61}
62.is-active span:nth-child(2){
63    opacity: 0;
64}
65.is-active span:nth-child(3){
66    transform: rotate(-315deg);
67    top:50%;
68    left: 0;
69    color: white;
70    transition: 0.5s;
71}
72
73.menu-in {
74    
75    display: block;
76    position: absolute;
77    top: 0;
78    left: -200px;
79    width: 200px;
80    z-index: 3;
81
82}
83
84.is-active .menu-in {
85    position: absolute;
86    left: 200px;
87    width: 200px;
88    height: 100%;
89    background-color: black;
90    
91   
92    
93}
94
95#mask {
96    display: none;
97    transition: all 0.5s;
98}
99
100.is-active #mask {
101    display: block;
102    position: fixed;
103    width: 100%;
104    height: 100%;
105    background-color: black;
106    opacity: 0.8;
107}
108
109video {
110    padding: 80px 0 0 0 ;
111    z-index: 1;
112}

jQuery
1$('.menu').click(function(){
2    $('.menu').toggleClass('is-active');
3    $('.menu span').toggleClass('is-active');
4    $('.menu-in').toggleClass('is-active');
5    $('#mask').toggleClass('is-active');
6});
7