ハンバーガーメニューの実装

前提・実現したいこと

プログラミング初心者で、ruby on railsを使いwebアプリの作成中です。
今回いわゆるハンバーガーメニューというものを実装したいのですが、JavaScriptファイルは読み込まれているがなぜかwebアプリ上では動作しません。
参考にしているサイトのURL:https://codepen.io/125naroom/pen/BaBZZme

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

検証ツールのコンソールでは、エラーも出ておらず、JavaScriptファイルに書いたokという文字はしっかりと出力されています。

該当のソースコード

JavaScript
1(function($) {
2  console.log("OK");
3  var $nav   = $('#navArea');
4  var $btn   = $('.toggle_btn');
5  var $mask  = $('#mask');
6  var open   = 'open'; // class
7  // menu open close
8  $btn.on( 'click', function() {
9    if ( ! $nav.hasClass( open ) ) {
10      $nav.addClass( open );
11    } else {
12      $nav.removeClass( open );
13    }
14  });
15  // mask close
16  $mask.on('click', function() {
17    $nav.removeClass( open );
18  });
19} )(jQuery);

applicationJS
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6require("@rails/ujs").start()
7// require("turbolinks").start()
8require("@rails/activestorage").start()
9require("channels")
10require('jquery')
11require('main.js')
12
13
14// Uncomment to copy all static images under ../images to the output folder and reference
15// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
16// or the `imagePath` JavaScript helper below.
17//
18// const images = require.context('../images', true)
19// const imagePath = (name) => images(name, true)
20//= require_tree .

HAML
1!!!
2%html
3  %head
4    %link{:rel=>"stylesheet",:href=>"./assets/stylesheets/Doctor.css"}
5    %sjavacript{:src=>"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"}
6    %javascript{:src=>"https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"}
7    %javascript{:src=>"javascript/main.js"}
8  %body
9    %header#header
10      %h1.site-title
11        = link_to "motorfan", root_path, :class => "motorfan"
12      %nav#navi
13        %ul.nav-menu
14          %li
15            %a{:href => "#my menu"}
16              MY MENU
17          %li
18            %a{:href => "#car"}
19              Cars
20          %li
21            %a{:href => "#bike"}
22              Bikes
23          %li
24            %a
25              = link_to '投稿する', new_car_bike_path, class: "post"
26              
27        %ul.nav-sign_status
28          - if user_signed_in?
29            %li
30              = link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout"
31          -else
32            %li
33              = link_to 'ログイン', new_user_session_path, class: "sign_in"
34            %li
35              = link_to '新規登録', new_user_registration_path, class: "sign_up"
36      .toggle_btn 
37        %span
38        %span
39        %span
40      #mask 
41

scss
1nav {
2        display: block;
3        position: fixed;
4        top: 0;
5        left: -300px;
6        bottom: 0;
7        width: 300px;
8        background: #ffffff;
9        overflow-x: hidden;
10        overflow-y: auto;
11        -webkit-overflow-scrolling: touch;
12        transition: all .5s;
13        z-index: 3;
14        opacity: 0;
15        nav a {
16          color: #fff;
17        }
18        .open nav {
19          left: 0;
20          opacity: 1;
21          nav ul {
22            margin: 0;
23            padding: 0;
24            nav ul.nav-menu {
25              margin-bottom: 60px;
26              border-top: solid 1px #fff;
27              nav ul.nav-menu li {
28                position: relative;
29                margin: 0;
30                padding: 20px 0;
31                border-bottom: solid 1px #fff;
32                nav ul.nav-sign_status li {
33                  padding: 5px 0;
34                }
35              }
36            }
37          }
38        }
39      }
40      .toggle_btn {
41        display: block;
42        position: fixed;
43        top: 30px;
44        right: 30px;
45        width: 30px;
46        height: 30px;
47        transition: all .5s;
48        cursor: pointer;
49        z-index: 3;
50      }
51      .toggle_btn span {
52        display: block;
53        position: absolute;
54        left: 0;
55        width: 30px;
56        height: 2px;
57        background-color: #333;
58        border-radius: 4px;
59        transition: all .5s;
60      }
61      .toggle_btn span:nth-child(1) {
62        top: 4px;
63      }
64      .toggle_btn span:nth-child(2) {
65        top: 14px;
66      }
67      .toggle_btn span:nth-child(3) {
68        bottom: 4px;
69      }
70      .open .toggle_btn span {
71        background-color: #fff;
72      }
73      .open .toggle_btn span:nth-child(1) {
74        -webkit-transform: translateY(10px) rotate(-315deg);
75        transform: translateY(10px) rotate(-315deg);
76      }
77      .open .toggle_btn span:nth-child(2) {
78        opacity: 0;
79      }
80      .open .toggle_btn span:nth-child(3) {
81        -webkit-transform: translateY(-10px) rotate(315deg);
82        transform: translateY(-10px) rotate(315deg);
83      }
84      #mask {
85        display: none;
86        transition: all .5s;
87      }
88      .open #mask {
89        display: block;
90        position: fixed;
91        top: 0;
92        left: 0;
93        width: 100%;
94        height: 100%;
95        background: #000;
96        opacity: .8;
97        z-index: 2;
98        cursor: pointer;
99      }