90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<!--
|
||
|
|
Replacement for legacy TheNavbarVertical.vue / TheNavbarHorizontal.vue.
|
||
|
|
Legacy carried a Vuexy/Vuesax toolbar with a theme customizer, search overlay,
|
||
|
|
notification dropdown, bookmarks bar and i18n switcher. Of those, only the
|
||
|
|
pieces with real backing survive: the sidebar toggle, the page title, and the
|
||
|
|
user dropdown with logout. The rest were template demo features.
|
||
|
|
-->
|
||
|
|
<a-layout-header class="the-navbar">
|
||
|
|
<div class="nav-left">
|
||
|
|
<a-button type="text" @click="$emit('toggle-sidebar')">
|
||
|
|
<MenuUnfoldOutlined v-if="collapsed" />
|
||
|
|
<MenuFoldOutlined v-else />
|
||
|
|
</a-button>
|
||
|
|
<span class="page-title">{{ pageTitle }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav-right">
|
||
|
|
<a-dropdown>
|
||
|
|
<span class="user-chip">
|
||
|
|
<a-avatar size="small" style="background-color: #1c2d56">
|
||
|
|
{{ initial }}
|
||
|
|
</a-avatar>
|
||
|
|
<span class="user-name">{{ displayName }}</span>
|
||
|
|
</span>
|
||
|
|
<template #overlay>
|
||
|
|
<a-menu>
|
||
|
|
<a-menu-item key="my-data" @click="router.push('/my-data')">
|
||
|
|
اطلاعات من
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-divider />
|
||
|
|
<a-menu-item key="logout" @click="onLogout">خروج</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</div>
|
||
|
|
</a-layout-header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useRoute, useRouter } from 'vue-router';
|
||
|
|
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { useAuthStore } from '../../stores/auth';
|
||
|
|
|
||
|
|
defineProps<{ collapsed?: boolean }>();
|
||
|
|
defineEmits<{ (e: 'toggle-sidebar'): void }>();
|
||
|
|
|
||
|
|
const route = useRoute();
|
||
|
|
const router = useRouter();
|
||
|
|
const auth = useAuthStore();
|
||
|
|
|
||
|
|
const pageTitle = computed(() => (route.meta?.pageTitle as string) ?? '');
|
||
|
|
const displayName = computed(() => auth.user?.name ?? auth.user?.fullName ?? 'کاربر');
|
||
|
|
const initial = computed(() => displayName.value.trim().charAt(0) || 'ک');
|
||
|
|
|
||
|
|
function onLogout() {
|
||
|
|
auth.logout();
|
||
|
|
router.push('/auth/login');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.the-navbar {
|
||
|
|
height: 61px; /* legacy ara/ant.less @layout-header-height */
|
||
|
|
background: #fff;
|
||
|
|
padding: 0 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
.nav-left,
|
||
|
|
.nav-right {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
.page-title {
|
||
|
|
font-size: 16px;
|
||
|
|
color: #1c2d56;
|
||
|
|
}
|
||
|
|
.user-chip {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|