<header>
  <button role="button" class="hamburger">
    <span class="bar bar-1"></span>
    <span class="bar bar-2"></span>
    <span class="bar bar-3"></span>
  </button>
  <nav>
    <ul class="navigation">
      <li class="nav-item"><a href="#"> HOME</a></li>
      <li class="nav-item"><a href="#"> CATEGORY</a></li>
      <li class="nav-item"><a href="#"> PRICING</a></li>
      <li class="nav-item"><a href="#"> CONTACT</a></li>
      <li class="nav-item"><a href="#"> ABOUT</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="section-1">Section 1</section>
  <section class="section-2">Section 2</section>
  <section class="section-3">Section 3</section>
</main>

*{
  margin:0;
  padding:0;
}

ul{
   list-style:none;
}
a{
   text-decoration:none;
}

body{
  background-color:#5256ad;
}
.hamburger{
  position:fixed;
  top:10px;
  z-index:1;
  width:35px;
  height:35px;
  border:none;
  border-radius:4px;
  background-color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.bar{
  display:block;
  width:20px;
  height:2px;
  background-color:black;
  transition:all 0.3s ease-in-out;
}


.hamburger.active .bar-1{
  transform:rotate(45deg) translate(4px,5px);
}
.hamburger.active .bar-3{
  transform:rotate(-45deg) translate(4px,-6px);
}
.hamburger.active .bar-2{
  opacity:0;
}

/* Navigation part */
.navigation{
  position:fixed;
  top:10px;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:center;
  padding:2.5rem 1rem 1rem;
  background-color:rgb(0,0,0,0.8);
  color:white;
  width:5rem;
  border-radius:5px;
  transform:translateX(-100%);
  transition:all 0.3s linear;
}
.nav-item{
  opacity:0;
  transition:all 0.6s linear;
}

.navigation.active-navbar .nav-item{
  opacity:1;
}

.nav-item a {
  color:white;
  font-size:0.75rem;
}

.visible-navbar{
  transform:translateX(0%);
}

main{
  margin-top:80px;
}

section{
  height:50vh;
  display:grid;
  place-items:center;
  font-size:3rem;
}
.section-1{
  background-color:crimson;
}
.section-2{
  background-color:pink;
}
.section-3{
  background-color:violet;
}

@media screen and (min-width:768px){
  .navigation{
    flex-direction:row;
    width:100%;
    justify-content:center;
    top:0;
    padding-top:1rem;
    border-radius:0;
  }
  .hamburger{
    display:none;
  }
}

const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".navigation");

hamburger.addEventListener("click", () => {
  hamburger.classList.toggle("active");
  navbar.classList.toggle("visible-navbar");
  navbar.classList.toggle("active-navbar");
});

// For the auto-resizing the page
const changingMediaQuery = () => {
  if (window.innerWidth >= 768) {
    hamburger.classList.remove("active");
    navbar.classList.add("visible-navbar");
    navbar.classList.add("active-navbar");
  } else {
    navbar.classList.remove("visible-navbar");
    navbar.classList.remove("active-navbar");
  }
};
window.addEventListener("resize", changingMediaQuery);