0f94839d
 함상기
babylon client fo...
|
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
|
<template>
<div class="layout-topbar clearfix">
<button class="layout-topbar-logo p-link" @click="goDashboard">
<img id="layout-topbar-logo" alt="babylon-layout" src="/layout/images/logo-white.png" />
</button>
<button class="layout-menu-button p-link" @click="onMenuButtonClick">
<i class="pi pi-bars"></i>
</button>
<button id="topbar-menu-button" class="p-link" @click="onTopbarMenuButtonClick">
<i class="pi pi-ellipsis-v"></i>
</button>
<ul :class="topbarItemsClass">
<li v-if="profileMode === 'popup' || horizontal" :class="['user-profile', { 'active-topmenuitem': activeTopbarItem === 'profile' }]" @click="$emit('topbar-item-click', { originalEvent: $event, item: 'profile' })">
<button class="p-link">
<img src="/layout/images/avatar.png" alt="babylon-layout" />
<span class="topbar-item-name">Arlene Welch</span>
</button>
<transition name="layout-submenu-container">
<ul class="fadeInDown" v-show="activeTopbarItem === 'profile'">
<li role="menuitem">
<button class="p-link">
<i class="pi pi-user"></i>
<span>Profile</span>
</button>
</li>
<li role="menuitem">
|
|
0f94839d
함상기
babylon client fo...
|
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
114
115
116
|
</button>
</li>
<li role="menuitem">
<button class="p-link">
<i class="pi pi-envelope"></i>
<span>Message</span>
</button>
</li>
<li role="menuitem">
<button class="p-link" @click="togeulSamples">
<i class="pi pi-bell"></i>
<span>{{ sampleTitle }}</span>
</button>
</li>
</ul>
</transition>
</li>
<li :class="[{ 'active-topmenuitem': activeTopbarItem === 'settings' }]" @click="$emit('topbar-item-click', { originalEvent: $event, item: 'settings' })">
<button class="p-link">
<i class="topbar-icon pi pi-cog"></i>
<span class="topbar-item-name">Setting</span>
</button>
<transition name="layout-submenu-container">
<ul class="fadeInDown" v-show="activeTopbarItem === 'settings'">
<li role="menuitem">
<button class="p-link" @click="changing('ko')">
<i class="pi pi-calendar-plus"></i>
<span>Language(Ko)</span>
</button>
<button class="p-link" @click="changing('en')">
<i class="pi pi-calendar-plus"></i>
<span>Language(En)</span>
</button>
</li>
</ul>
</transition>
</li>
</ul>
</div>
</template>
<script>
import { ref } from "vue";
import { useI18n } from 'vue-i18n';
import { useStore } from "vuex";
import router from '../router';
export default {
props: {
topbarMenuActive: Boolean,
activeTopbarItem: String,
profileMode: String,
horizontal: Boolean,
},
setup() {
const { locale } = useI18n();
const store = useStore();
return {
locale,
store
};
},
methods: {
onMenuButtonClick(event) {
this.$emit('menubutton-click', event);
},
onTopbarMenuButtonClick(event) {
this.$emit('topbar-menubutton-click', event);
},
goDashboard() {
window.location = '/#/';
},
changing(la) {
console.log(la);
locale.value = la;
},
togeulSamples(event) {
let blnSamples = !this.store.state.samplePages;
this.store.commit("setSamplePages", blnSamples);
|
|
0f94839d
함상기
babylon client fo...
|
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
}
},
computed: {
topbarItemsClass() {
return [
'topbar-menu fadeInDown',
{
'topbar-menu-visible': this.topbarMenuActive,
},
];
},
sampleTitle() {
return !this.store.state.samplePages?'Go Sample Pages':'Go Normal Pages';
}
},
};
</script>
|
