miracle/components/Header.vue
2020-02-02 03:26:13 +07:00

52 lines
1.0 KiB
Vue

<template>
<div>
<header>
<div class="header-left" v-if="needsBackButton">
<nuxt-link class="header-link" to="/"><i class="material-icons">arrow_back</i></nuxt-link>
</div>
<div class="header-middle">
<p class="text-lg">{{ title }}</p>
</div>
<div class="header-right">
</div>
</header>
</div>
</template>
<script>
export default {
computed: {
needsBackButton() {
return this.$nuxt.$route.path != "/";
},
title() {
return this.$store.state.title;
}
},
methods: {
goBack(event) {
if(event) event.preventDefault();
this.$router.back();
}
}
}
</script>
<style>
header {
@apply h-16 w-full z-10 flex flex-row justify-start items-center px-4;
}
.header-link {
@apply mx-2 h-6 w-6 cursor-pointer;
}
.header-left {
@apply flex flex-row justify-start items-center h-full;
}
.header-middle {
@apply flex-grow flex flex-row justify-start items-center h-full;
}
.header-right {
@apply flex flex-row justify-start items-center h-full;
}
</style>