burger-menu.sass

$container-width: 28
$container-width-unit: #{$container-width * 1px}
$container-height: ($container-width * 14 / 15)
$bar-height: 4
$bar-height-unit: #{$bar-height * 1px}
$bar-y-translate-offset: ($container-height - $bar-height) / 2
.hamburger-box
  display: inline-flex
  cursor: pointer
  font: inherit
  color: inherit
  text-transform: none
  background-color: transparent
  border: 0
  margin: 0
  padding: 0
  box-sizing: content-box

  width: $container-width-unit
  height: #{$container-height * 1px}

  display: flex
  flex-direction: column
  justify-content: space-between

  &:hover
    opacity: 0.7
  &.is-active:hover
    opacity: 0.7

  & > .hamburger-top,
  & > .hamburger-middle,
  & > .hamburger-bottom
    width: $container-width-unit
    height: $bar-height-unit
    background-color: #000
    border-radius: $bar-height-unit
    transition-property: transform
    transition-duration: 0.15s
    transition-timing-function: ease

  & > .hamburger-middle
    transition-property: transform, opacity

.hamburger-box
  &.is-active
    & > .hamburger-top
      transform: translateY(#{$bar-y-translate-offset * 1px}) rotate(45deg)
    & > .hamburger-middle
      opacity: 0
    & > .hamburger-bottom
      transform: translateY(#{$bar-y-translate-offset * -1px}) rotate(-45deg)

button
  border: none
  outline: none

#burger-menu-container
    position: absolute
    right: 5px
    padding: 5px 5px
    background-color: white
#burger-menu
    border-radius: 2px
    align-self: center