index.css

.burger-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  height: 1.1rem;
  width: 1.1rem;
}

.line {
  display: block;
  height: 0.5rem;
  width: 100%;
  border-radius: 0.1rem;
  transition: transform 0.3s ease-in-out;
}

.line-1 {
  transform-origin: top;
}

.line-3 {
  transform-origin: bottom;
}

.burger-menu.active .line-1 {
  transform: translateY(0.5rem) rotate(49deg);
}

.burger-menu.active .line-2 {
  opacity: 0;
}

.burger-menu.active .line-3 {
  transform: translateY(-0.5rem) rotate(-49deg);
}

menu {
  display: none;
}

menu.active{
  display: block;
  width: calc(100vh*0.25);
}

menu li{
  list-style: none;
  padding: 0.4rem;
  border-bottom: 1px solid #6c6c6c;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger-menu > .line{
  background-color: #6c6c6c;
 }

 .burger-menu:hover > .line{
  background-color: #215878;
 }