Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<v-app-bar
app
flat
>
<!-- ログイン時のみハンバーガー表示したいケース用 -->
<v-app-bar-nav-icon v-if="showNavIcon" @click="$emit('toggle-drawer')" class="ml-3" />
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-spacer />
<v-list
class="d-flex flex-row nav-tight"
density="compact"
nav
>
<v-list-item
v-for="(link, i) in links"
:key="i"
:to="link.to"
exact
>
<template #prepend>
<v-icon size="18" class="me-0">{{ link.icon || 'mdi-circle-small' }}</v-icon>
</template>
<v-list-item-title>{{ t(link.titleKey) }}</v-list-item-title>
</v-list-item>
</v-list>
<v-divider
v-if="showLogout"
vertical
class="mr-2 py-2"
/>
<v-btn
v-if="showLogout"
variant="text"
@click="handleLogout"
text="Logout"
/>
</v-app-bar>
</template>
<script setup lang="ts">
// region Dependency Injection
import type {RouteLocationRaw} from 'vue-router'
import {useRouter} from 'vue-router'
import {useAuth} from '@/composables/useAuth'
import {useSchemaLogger} from '@/libs/logger/logger'
import { useI18n } from "vue-i18n";
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
type MenuLink = {
to: RouteLocationRaw
titleKey: string
icon?: string
}
// endregion interface
// region constants
const router = useRouter()
const logger = useSchemaLogger({ module: 'Home' })
const { t } = useI18n()
// endregion constants
// region props
const props = withDefaults(defineProps<{
title?: string
links: MenuLink[]
showNavIcon?: boolean
showLogout?: boolean
}>(), {
title: 'My App',
showNavIcon: false,
showLogout: false,
})
// endregion props
// region variable
// endregion variable
// region properties
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
const handleLogout = async () => {
try {
await useAuth().logout()
await router.push({name: 'Home'})
} catch (e) {
logger.error('ログアウトに失敗しました', e)
}
}
// endregion methods
// region export
// endregion export
</script>
<style scoped>
</style>
|