JustalK/PORTFOLIO

View on GitHub
src/components/main/menu.vue

Summary

Maintainability
Test Coverage
<template>
<div
id="MENU">
<div :class="{bar:true}">
<span @click.stop="back">
<div :class="{logo:true, invisible: invisible}">
<div
v-for="index in 4"
:key="index" />
</div>
Back
</span>
<div
:class="{hamburger:true, invisible: invisible}"
@click.stop="show_menu">
<div />
<div />
<div />
</div>
</div>
<nav :class="{active: active}">
<a @click.stop="change_by_menu('home')">HOME</a>
<a @click.stop="change_by_menu('portfolio')">PORTFOLIO</a>
<a @click.stop="change_by_menu('resume')">RESUME</a>
<a href="https://play.google.com/store/apps/details?id=com.justalk.portfolio">APP</a>
<a href="https://github.com/JustalK">GITHUB</a>
</nav>
</div>
</template>
<script>
export default {
props: {
invisible: {
type: Boolean,
required: true
}
},
emits: ['back', 'change_by_menu'],
data: () => {
return {
active: false
};
},
methods: {
back() {
this.$emit('back');
},
show_menu() {
this.active = !this.active;
},
change_by_menu(slug) {
this.$emit('change_by_menu', slug);
}
}
};
</script>
<style src="../../assets/less/menu.less"></style>