<template>
  <div class="menu-toggle" @click="toggleMenu()">
    <div class="span top" :class="{active: menuShow}"></div>
    <div class="span middle" :class="{active: menuShow}"></div>
    <div class="span bottom" :class="{active: menuShow}"></div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: '',
  components: {
  }
})
export default class extends Vue {
  @Prop() private menuShow: boolean

  toggleMenu() {
    this.$emit('menu-stat-change', !this.menuShow)
  }
}
</script>
<style lang="scss" scoped>
.menu-toggle {
  z-index: 999;
  width: 28px;
  height: 26px;
  cursor: pointer;
  margin-top: -7px;
  transition: all .3s ease-out;
  .span{
    height: 2px;
    margin: 7px 0 0 0;
    visibility: visible;
    opacity: 1;
    border-radius: 5px;
    background: white;
    transition: all 0.3s ease-out;
    backface-visibility: hidden;
    &.top.active{
      transform: rotate(45deg) translateX(3px) translateY(5px);
    }
    &.middle.active{
      opacity: 0;
    }
    &.bottom.active {
      transform: rotate(-45deg) translateX(8px) translateY(-10px);
    }
  }
}
</style>
