root
106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import { useUserStore } from '@KTXC/stores/userStore';
|
|
import { useLayoutStore } from '@KTXC/stores/layoutStore';
|
|
import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
|
|
import NotificationDD from './NotificationDD.vue';
|
|
import Searchbar from './SearchBarPanel.vue';
|
|
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
|
|
|
|
const layoutStore = useLayoutStore();
|
|
const userStore = useUserStore();
|
|
const userAuth = computed(() => userStore.auth);
|
|
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
|
|
</script>
|
|
|
|
<template>
|
|
<v-app-bar elevation="0" height="60">
|
|
<v-btn
|
|
class="hidden-md-and-down text-secondary mr-3"
|
|
color="darkText"
|
|
icon
|
|
rounded="sm"
|
|
variant="text"
|
|
@click.stop="layoutStore.setMiniSidebar(!layoutStore.miniSidebar)"
|
|
size="small"
|
|
>
|
|
<v-icon>mdi-menu-open</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
class="hidden-lg-and-up text-secondary ms-3"
|
|
color="darkText"
|
|
icon
|
|
rounded="sm"
|
|
variant="text"
|
|
@click.stop="layoutStore.toggleSidebarDrawer()"
|
|
size="small"
|
|
>
|
|
<v-icon>mdi-menu</v-icon>
|
|
</v-btn>
|
|
|
|
<!-- search mobile -->
|
|
<v-menu :close-on-content-click="false" class="hidden-lg-and-up" offset="10, 0">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
class="hidden-lg-and-up text-secondary ml-1"
|
|
color="lightsecondary"
|
|
icon
|
|
rounded="sm"
|
|
variant="flat"
|
|
size="small"
|
|
v-bind="props"
|
|
>
|
|
<v-icon>mdi-magnify</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-sheet class="search-sheet v-col-12 pa-0" width="320">
|
|
<v-text-field persistent-placeholder placeholder="Search here.." color="primary" variant="solo" hide-details>
|
|
<template v-slot:prepend-inner>
|
|
<v-icon>mdi-magnify</v-icon>
|
|
</template>
|
|
</v-text-field>
|
|
</v-sheet>
|
|
</v-menu>
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Search part -->
|
|
<!-- ---------------------------------------------- -->
|
|
<v-sheet class="d-none d-lg-block" width="250">
|
|
<Searchbar />
|
|
</v-sheet>
|
|
|
|
<!---/Search part -->
|
|
|
|
<v-spacer />
|
|
<!-- ---------------------------------------------- -->
|
|
<!---right part -->
|
|
<!-- ---------------------------------------------- -->
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- Notification -->
|
|
<!-- ---------------------------------------------- -->
|
|
<NotificationDD />
|
|
|
|
<!-- ---------------------------------------------- -->
|
|
<!-- User Profile -->
|
|
<!-- ---------------------------------------------- -->
|
|
<v-menu :close-on-content-click="false" offset="8, 0">
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
|
|
<div class="d-flex align-center">
|
|
<v-avatar class="mr-sm-2 mr-0" size="32">
|
|
<v-img :src="userAvatar" :alt="userAuth?.label || 'User'" cover />
|
|
</v-avatar>
|
|
<h6 class="text-subtitle-1 mb-0 d-sm-block d-none">
|
|
{{ userAuth?.label }}
|
|
</h6>
|
|
</div>
|
|
</v-btn>
|
|
</template>
|
|
<v-sheet rounded="md" width="290">
|
|
<LayoutUserMenu />
|
|
</v-sheet>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
</template>
|