const hamburger = document.querySelector(".

hamburger");
const navMenu = document.querySelector(".navbar__wrapper");

hamburger.addEventListener("click",() =>{
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
document.querySelectorAll(".navbar__wrapper--link").forEach(n=>
n.addEventListener("click",()=>{
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}))
 Standart css

.burger{
// display: none;
cursor: pointer;
.bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: black;
}
}
 Media max width

@media (max-width:600px){
.burger.active{
position: fixed;
right:7px;
}
.burger.active .bar:nth-child(2){
opacity: 0;
}
.burger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.burger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}
.navbar__wrapper{
position: fixed;
left:0;
top:-100%;
flex-direction: column;
width: 100%;
text-align: center;
transition: all ease 0.6s;
background-color: rgb(136, 105, 105);
margin:0;
 }
.navbar__wrapper.active{
top:0;
padding-left:25px;
}
.navbar__wrapper li{
margin:30px;
font-size:1.5rem;
color:white;
}
.bar{
transition: all ease 0.5s;
}
}