Initialize the admin app with banner management for app sections.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-09 17:08:46 +03:30
commit d670921f74
104 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,139 @@
+<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>