Czy mógł by mi ktoś podpowiedzieć co jest źle w kodzie?
html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/635833554c.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="burger">
<i class="fa-solid fa-bars show"></i>
<i class="fa-solid fa-xmark"></i>
</div>
<header>
<nav>
<ul>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
<li>lorem</li>
</ul>
</nav>
</header>
<script src="script.js"></script>
</body>
css
* {
margin: 0;
padding: 0;
}
.burger {
position: absolute;
top: 30px;
right: 30px;
font-size: 30px;
cursor: pointer;
}
nav ul li {
list-style: none;
margin-bottom: 20px;
}
nav {
position: absolute;
top: 0;
left: -300px;
width: 300px;
height: 100vh;
background-color: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
i.fa-solid {
display: none;
}
i.show {
display: block;
}
nav.show {
left: 0;
}
js
const burger = document.querySelector(".burger");
const iconBurger = document.querySelector(".fa-bars");
const iconX = document.querySelector(".fa-xmark");
const column = document.querySelector("nav");
burger.addEventListener("click", function () {
iconBurger.classList.toggle("show");
iconX.classList.toggle("show");
column.classList.toggle("show");
})