155 lines
3.1 KiB
Vue
155 lines
3.1 KiB
Vue
<script setup lang="ts">
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ADMIN_NAV_ITEMS, isNavActive } from '@/utils/navigation'
|
||
import AdminIcon from '@/components/icons/AdminIcon.vue'
|
||
import { useAuthStore } from '@/stores/auth'
|
||
|
||
defineProps<{
|
||
open: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
close: []
|
||
}>()
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const auth = useAuthStore()
|
||
|
||
function navigate(path: string) {
|
||
router.push(path)
|
||
emit('close')
|
||
}
|
||
|
||
function logout() {
|
||
auth.logout()
|
||
router.push('/login')
|
||
emit('close')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="admin-drawer-backdrop"
|
||
:class="{ open }"
|
||
role="presentation"
|
||
@click="emit('close')"
|
||
/>
|
||
<aside
|
||
class="admin-drawer"
|
||
:class="{ open }"
|
||
aria-label="منوی ناوبری"
|
||
:aria-hidden="!open"
|
||
>
|
||
<div class="admin-drawer__brand">
|
||
<strong>پارچه</strong>
|
||
<span>پنل مدیریت</span>
|
||
<button type="button" class="admin-drawer__close" aria-label="بستن منو" @click="emit('close')">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<nav class="admin-drawer__nav">
|
||
<button
|
||
v-for="item in ADMIN_NAV_ITEMS"
|
||
:key="item.name"
|
||
type="button"
|
||
class="admin-drawer__item"
|
||
:class="{ active: isNavActive(item.path, route.path) }"
|
||
@click="navigate(item.path)"
|
||
>
|
||
<AdminIcon :name="item.icon" :size="20" />
|
||
<span>{{ item.label }}</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<button type="button" class="admin-drawer__logout" @click="logout">
|
||
<AdminIcon name="logout" :size="20" />
|
||
<span>خروج</span>
|
||
</button>
|
||
</aside>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.admin-drawer__brand {
|
||
position: relative;
|
||
padding: 20px 16px;
|
||
text-align: center;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.admin-drawer__brand strong {
|
||
display: block;
|
||
font-size: 1.0625rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.admin-drawer__brand span {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.admin-drawer__close {
|
||
position: absolute;
|
||
top: 16px;
|
||
left: 12px;
|
||
width: 32px;
|
||
height: 32px;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #fff;
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
}
|
||
|
||
.admin-drawer__nav {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 12px 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.admin-drawer__item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
text-align: right;
|
||
}
|
||
|
||
.admin-drawer__item.active {
|
||
background: var(--color-sidebar-active);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.admin-drawer__logout {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin: 8px 10px 16px;
|
||
padding: 12px 14px;
|
||
border: none;
|
||
border-radius: var(--radius-sm);
|
||
background: transparent;
|
||
color: #f87171;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.admin-drawer__logout:hover {
|
||
background: rgba(248, 113, 113, 0.12);
|
||
color: #fca5a5;
|
||
}
|
||
</style>
|