hamburguer-menu.styl

burger.styl

$burger = {
  width: 20px
  height: 20px
  stripeHeight: 4px
  extraClickArea: 15px
  regularColor: colors.black
  activeColor: colors.white
}
$burger.stripePadding = (($burger.height - $burger.stripeHeight * 3) / 2)

.burger
  position: fixed
  z-index: layers.burger
  padding: $burger.extraClickArea
  border: none
  background: none
  appearance: none
  cursor: pointer

.burger__slices
  position: relative
  display: block
  size($burger.width, $burger.height)
  font-size: 0
  text-indent: -9999px
  transition: transform .3s ease

  span
    position: absolute
    left: 0
    top: ($burger.height / 2 - $burger.stripeHeight / 2)
    display: block
    size(100%, $burger.stripeHeight)
    background-color: $burger.regularColor
    transition: background-color .3s ease

    body.is-header-overlay-active &
      background: none

    &::before
    &::after
      content: ''
      display: block
      position: absolute
      left: 0
      size(100%, $burger.stripeHeight)
      background-color: $burger.regularColor
      transition-duration: .3s, .3s, .3s
      transition-delay: 0s, .3s, .3s
      
      body.is-header-overlay-active &
        background-color: $burger.activeColor
        transition-delay: .3s, .3s, 0s

    &::before
      top: -($burger.stripeHeight + $burger.stripePadding)
      transition-property: background-color, transform, top
      
      body.is-header-overlay-active &
        top: 0
        transform: rotate(45deg)

    &::after
      bottom: -($burger.stripeHeight + $burger.stripePadding)
      transition-property: background-color, transform, bottom

      body.is-header-overlay-active &
        bottom: 0
        transform: rotate(-45deg)

Header.blade.php

<header class="header js-header" role="banner">
  <a class="brand" href="{{ home_url('/') }}">{{ $site_name }}</a>

  <button class="burger js-burger" aria-label="Toggle Main Menu" aria-expanded="false" aria-haspopup="true">
    <span class="burger__slices"><span>Toggle Main Menu</span></span>
  </button>

  <div class="header__overlay js-header-overlay">
    {!! $primary_menu !!}
  </div>
</header>

Header.js

let isOpen = false

export default {
  init () {
    const burgerEl = document.querySelector('.js-burger')
    if (burgerEl) {
      const toggleMenu = () => {
        isOpen = document.body.classList.toggle('is-header-overlay-active')
        burgerEl.setAttribute('aria-expanded', isOpen)
      }

      burgerEl.addEventListener('click', toggleMenu)
      window.addEventListener('keyup', e => {
        if (isOpen && e.keyCode === 27) {
          toggleMenu()
        }
      })
    }
  },
}

Header.styl

.burger
  top: 35px
  right: 35px
  &.is-active
    span
      &::before
      &::after
        background-color: colors.white

// .header
.header__overlay
  display: flex
  align-items: center
  position: fixed
  z-index: layers.overlay
  top: 0
  left: 0
  size(100%)
  padding: 45px
  font-size: rem(48px)
  line-height: 1.4
  background-color: rgba(colors.black, .6)
  transition: .3s ease

  body:not(.is-header-overlay-active) &
    opacity: 0
    visibility: hidden

  a
    color: colors.white

.header__menu
  padding: 0
  margin: 0

.header__menu__item
  list-style: none