All files / src/layouts DefaultLayout.vue

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
111
112
113
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <v-layout>
 
    <!-- ドロワー（ログイン時のみ） -->
    <AppNavDrawer v-model="drawer" :links="authLinks" :close-on-navigate="true" />
 
    <!-- 共通トップバー（ハンバーガー＆Logout付き） -->
    <AppTopBar
      app
      title="My App"
      :links="authTopLinks"
      :show-nav-icon="true"
      :show-logout="true"
      @toggle-drawer="drawer = !drawer"
      @logout="logout"
    />
 
    <v-main>
      <v-container class="py-6">
        <div v-if="showProfileTabs" class="">
          <ProfileTabs />
        </div>
        <slot></slot>
      </v-container>
    </v-main>
 
    <AppFooter app />
 
  </v-layout>
 
</template>
 
<script setup lang="ts">
// region Dependency Injection
import {computed, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useAuth} from '@/composables/useAuth'
// endregion Dependency Injection
// region Component Injection
import AppFooter from '@/components/organisms/common/AppFooter.vue'
import AppTopBar from '@/components/organisms/common/AppTopBar.vue'
import AppNavDrawer from '@/components/organisms/common/AppNavDrawer.vue'
import ProfileTabs from '@/components/molecules/ProfileTabs.vue'
// endregion Component Injection
 
// region interface
// endregion interface
 
// region constants
const router = useRouter()
const route = useRoute()
const drawer = ref(false)
// endregion constants
 
// region props
// endregion props
 
// region variable
// endregion variable
 
// region properties
// ドロワーに出したいリンク（ログイン時）
const authLinks = [
  { to: { name: 'Dashboard' }, titleKey: 'ui.page.dashboard.root.title', icon: 'mdi-view-dashboard-outline' },
  { to: { name: 'Profile' }, titleKey: 'ui.page.profile.root.title', icon: 'mdi-account-outline' },
  { to: { name: 'Skills' }, titleKey: 'ui.page.skill.root.title', icon: 'mdi-star-outline' },
  { to: { name: 'Educations' }, titleKey: 'ui.page.education.root.title', icon: 'mdi-school-outline' },
  { to: { name: 'Experiences' }, titleKey: 'ui.page.experience.root.title', icon: 'mdi-briefcase-outline' },
  { to: { name: 'Licenses' }, titleKey: 'ui.page.license.root.title', icon: 'mdi-card-account-details-outline' },
  { to: { name: 'About' }, titleKey: 'ui.page.about.root.title', icon: 'mdi-information-outline' },
  { to: { name: 'Test' }, titleKey: 'ui.page.test.root.title', icon: 'mdi-flask-outline' },
]
 
// ヘッダ右側メニュー（ログイン時）
const authTopLinks = [
  // { to: { name: 'Home' }, titleKey: 'ui.page.home.root.title', icon: 'mdi-home' },
  { to: { name: 'Dashboard' }, titleKey: 'ui.page.dashboard.root.title', icon: 'mdi-view-dashboard-outline' },
  { to: { name: 'About' }, titleKey: 'ui.page.about.root.title', icon: 'mdi-information-outline' },
  { to: { name: 'Test' }, titleKey: 'ui.page.test.root.title', icon: 'mdi-flask-outline' },
  { to: '/hoge', titleKey: 'ui.page.hoge.root.title', icon: 'mdi-home' },
]
// endregion properties
 
// region emits
// endregion emits
 
// region validator
// endregion validator
 
// region methods
const showProfileTabs = computed(() => String(route.path).startsWith('/profile'))
const logout = async () => {
  await useAuth().logout()
  await router.push({ name: 'Home' })
}
watch(
  () => route.fullPath,
  () => {
    drawer.value = false
  }
)
// endregion methods
 
// region export
// endregion export
</script>
 
<style scoped>
.v-layout {
  min-height: 100%;
}
</style>