Hamburger

<button class="hamburger" type="button" aria-label="Show Menu"><span class="hamburger__span"></span></button>

.hamburger {

  @extend %button-reset;

  @include display-flex(center, null, null, null, center);

  grid-area: hamburger;

  position: relative;

  block-size: var(--hamburger-width);

  transition: all 0.15s;

  inline-size: var(--hamburger-width);

  z-index: 2;

​

  &__span,

  &__span:before,

  &__span:after {

    background-color: var(--icon-color);

    block-size: 0.1875rem;

    border-radius: 0.625rem;

    inline-size: 1.710625rem;

    inset-inline-start: 0;

    position: absolute;

    transition: all 0.15s ease-in-out;

    z-index: 0;

  }

​

  &__span {

    &:before,

    &:after {

      content: "";

    }

​

    &:before {

      inline-size: 1.463125rem;

      transform: translateY(-0.475rem);

    }

​

    &:after {

      inline-size: 1.094375rem;

      transform: translateY(0.475rem);

    }

  }

​

  &--active {

    .hamburger__span {

      transform: translateX(-3.125rem);

      background: transparent;

​

      &:before {

        transform: rotate(45deg) translate(2.1875rem, -2.1875rem);

        inline-size: 1.710625rem;

      }

​

      &:after {

        transform: rotate(-45deg) translate(2.1875rem, 2.1875rem);

        inline-size: 1.710625rem;

      }

    }

  }

​

  &:hover,

  &:focus {

    opacity: 0.7;

  }

}

const hamburger = document.querySelectorAll('.hamburger');

​

// Toggle hamburger(s)

function toggleHamburger() {

  hamburger.forEach((element) => {

    element.classList.toggle('hamburger--active');

    if (element.classList.contains('hamburger--active')) {

      element.setAttribute('aria-label', 'Hide Menu');

    } else {

      element.setAttribute('aria-label', 'Show Menu');

    }

  });

}