76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<template>
|
|
<b-navbar :fixed-top="true" :centered="true" class="docs-navbar is-spaced has-shadow">
|
|
<template #brand>
|
|
<b-navbar-item tag="router-link" :to="{ path: '/' }">
|
|
<img src="/img/logo.png" alt="Logo" />
|
|
</b-navbar-item>
|
|
</template>
|
|
|
|
<template #start>
|
|
<b-navbar-item :active="isActiveHome" type="div" @click="goHome">Home</b-navbar-item>
|
|
<b-navbar-item :active="isActiveIntroduce" @click="$router.push('/introduce')">Introduce</b-navbar-item>
|
|
<b-navbar-item :active="isActiveCustomer" @click="$router.push('/customer')">Customer</b-navbar-item>
|
|
<b-navbar-item :active="isActiveSample" @click="$router.push('/sample')">Sample</b-navbar-item>
|
|
</template>
|
|
|
|
<template #end>
|
|
<b-navbar-item v-if="isAuthenticated" type="div">{{ $ustra.auth.getTokenClaim().displayName }}</b-navbar-item>
|
|
<b-navbar-item v-if="!isAuthenticated" @click="$router.push('/customer')">Login</b-navbar-item>
|
|
<b-navbar-item v-if="isAuthenticated" @click="logout">Logout</b-navbar-item>
|
|
</template>
|
|
</b-navbar>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component } from 'vue-property-decorator'
|
|
import { CustomFoComponent } from '@/components/custom-fo-component'
|
|
import startsWith from 'lodash/startsWith'
|
|
|
|
@Component
|
|
export default class extends CustomFoComponent {
|
|
// #region variables
|
|
get isActiveHome() {
|
|
return this.$route.path === '/'
|
|
}
|
|
|
|
get isActiveIntroduce() {
|
|
return startsWith(this.$route.path, '/introduce')
|
|
}
|
|
|
|
get isActiveCustomer() {
|
|
return startsWith(this.$route.path, '/customer')
|
|
}
|
|
|
|
get isActiveSample() {
|
|
return startsWith(this.$route.path, '/sample')
|
|
}
|
|
|
|
get isAuthenticated() {
|
|
return this.$ustra.auth.isAuthenticated()
|
|
}
|
|
|
|
// #endregion
|
|
// #region hooks
|
|
// #endregion
|
|
|
|
// #region methods
|
|
signIn() {
|
|
alert('준비 중입니다.')
|
|
}
|
|
|
|
goHome() {
|
|
this.$router.push('/')
|
|
}
|
|
// #endregion
|
|
// #region watches
|
|
// #endregion
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
a.navbar-item.is-active,
|
|
.navbar-link.is-active {
|
|
background-color: #fafafa;
|
|
color: #7957d5;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|