Skip to content

Instantly share code, notes, and snippets.

@iErik
Created April 2, 2020 19:29
Show Gist options
  • Save iErik/283f6cfca97f1838b9bed916f1f1ce79 to your computer and use it in GitHub Desktop.
Save iErik/283f6cfca97f1838b9bed916f1f1ce79 to your computer and use it in GitHub Desktop.
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment