Почему не работает JavaScript, реализованный на моем сайте? ⇐ CSS

[Anonymous]

Скрипт, который я внедрил на свой сайт, не работает, я все проверил и прохожу обучение. Есть идеи?
Ссылка на мой репозиторий GitHub:
https://github.com/DBvagabond/dbogdanski
ссылка на предварительный просмотр веб-сайта:
https: //htmlpreview.github.io/?https://github.com/DBvagabond/dbogdansk ... index.html
HTML

Код: Выделить всё

[url=index.html]dbogdanski[/url]

[img]images/menu1.svg[/img]


[img]images/exit1.svg[/img]
[list]
[*][url=#]Work[/url]
[*][url=#]About[/url]
[*][url=#]Shop[/url]
[*][url=#]Social[/url]
[/list]
[list]
[*][url=#]Contact[/url]
[/list]





hero



const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');

mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})

mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})

SCSS

Код: Выделить всё

.navbar {
background: var(--primary-color);
padding: 1em;

.logo {
text-decoration: none;
font-weight: bold;
color: var(--secondary-color);
font-size: 1.2em;

span {
color: white;
}
}

nav {
display: none;
}

.mobile-menu{
width: 1.5em;
cursor: pointer;
display: block;
}

.container {
display: flex;
place-content: space-between;
}

.mobile-menu-exit{
width: 1.5em;
float: right;
margin: .5em;
cursor: pointer;
}
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

section {
padding: 5em 2em;
}

nav {
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: grey;
height: 100vh;
padding: 1em;

ul.primary-nav {
margin-top: 5em;
}

li {
a{
color: var(--secondary-color);
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;

&:hover {
font-weight: bold;
}
}
}
}

Я проверил на ошибки, скопировал и вставил код из репозитория автора.
Мобильное меню должно всплывать и закрываться при нажатии на значок меню-гамбургера.

Подробнее здесь: https://stackoverflow.com/questions/747 ... e-not-work