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,154 @@
+<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>