140 lines
3.0 KiB
Vue
140 lines
3.0 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'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
function navigate(path: string) {
|
|
router.push(path)
|
|
}
|
|
|
|
function logout() {
|
|
auth.logout()
|
|
router.push('/login')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="admin-sidebar" aria-label="ناوبری پنل مدیریت">
|
|
<div class="admin-sidebar__brand">
|
|
<strong class="admin-sidebar__title">پارچه</strong>
|
|
<span class="admin-sidebar__subtitle">پنل مدیریت</span>
|
|
</div>
|
|
|
|
<nav class="admin-sidebar__nav">
|
|
<button
|
|
v-for="item in ADMIN_NAV_ITEMS"
|
|
:key="item.name"
|
|
type="button"
|
|
class="admin-sidebar__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-sidebar__logout" @click="logout">
|
|
<AdminIcon name="logout" :size="20" />
|
|
<span>خروج</span>
|
|
</button>
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.admin-sidebar {
|
|
width: var(--sidebar-width);
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
background: var(--color-sidebar-bg);
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.admin-sidebar__brand {
|
|
padding: 24px 20px 20px;
|
|
text-align: center;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.admin-sidebar__title {
|
|
display: block;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.admin-sidebar__subtitle {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.admin-sidebar__nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.admin-sidebar__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
text-align: right;
|
|
transition: background var(--transition-fast), color var(--transition-fast);
|
|
}
|
|
|
|
.admin-sidebar__item:focus-visible {
|
|
outline: 2px solid rgba(255, 255, 255, 0.45);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.admin-sidebar__item:hover {
|
|
background: var(--color-sidebar-hover);
|
|
}
|
|
|
|
.admin-sidebar__item.active {
|
|
background: var(--color-sidebar-active);
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.admin-sidebar__logout {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 8px 10px 16px;
|
|
padding: 10px 14px;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
background: transparent;
|
|
color: #f87171;
|
|
font-size: 0.8125rem;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.admin-sidebar__logout:hover {
|
|
background: rgba(248, 113, 113, 0.12);
|
|
color: #fca5a5;
|
|
}
|
|
</style>
|