FMenuButton.vue

<template>
  <div class="FMenuButton" :class="btnClass">
    <div :class="btnContainerClass" @click="emitClick">
      <div class="FMenuButton__icon">
        <div
          v-for="(line, index) in 3"
          :key="index"
          class="FMenuButton__line"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'f-menu-button',

  props: {
    isOpen: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: 'primary'
    }
  },

  computed: {
    btnStyle() {
      return `color--${this.color}`
    },

    btnContainerClass() {
      return [
        'FMenuButton__container',
        {
          'FMenuButton__container--open': this.isOpen,
          'FMenuButton__container--close': !this.isOpen
        }
      ]
    }
  },

  methods: {
    emitClick() {
      this.$emit('click')
    }
  }
}
</script>