<button class="burger" data-burger aria-label="Меню навигации">
        <span class="burger__line"></span>
 </button>
 

.burger {
  position: relative;
  width: 30px;
  height: 23px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  align-self: center;
}
.burger__line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: translateY(-50%);
  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.burger:active:not(.active):after {
  width: 60%;
}
.burger:active:not(.active) .burger__line {
  width: 80%;
}
.burger:hover:after,
.burger:hover:before,
.burger:hover .burger__line {
 background-color:orange;
}
.burger.active .burger__line {
  transform: scale(0);
}
.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out, background-color 0.3s ease-in-out, width 0.3s ease-in-out;
}
.burger::before{
  top: 0;
}
.burger::after {
  bottom: 0;
}
.burger-active .burger__line {
  opacity: 0;
}
.burger-active::before {
  top: 50%;
  transform: rotate(45deg);
}
.burger-active::after {
  top: 50%;
  bottom: auto;
  transform: rotate(-45deg);
}
.stop-scroll {
  overflow: hidden;
}

const burger = document.querySelector("[data-burger]");
const body = document.body;

burger.setAttribute("aria-expanded", isBurgerOpen());

burger.addEventListener("click", () => {
  burger.setAttribute("aria-expanded", !isBurgerOpen());
  body.classList.toggle("stop-scroll");
  burger.classList.toggle("burger-active");
});

function isBurgerOpen() {
    return burger.classList.contains("burger-active")
}