imen_pishghaman/apps/admin/src/layouts/AdminLayout.vue

<script setup lang="ts">
import {
  AppstoreOutlined,
  DashboardOutlined,
  ExportOutlined,
  FileImageOutlined,
  LayoutOutlined,
  LogoutOutlined,
  MailOutlined,
  MenuOutlined,
  ShoppingOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { ROLE_LABELS } from "@imen/shared";
import { computed, h, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";
import { SITE_URL } from "@/utils/format";

const auth = useAuthStore();
const route = useRoute();
const router = useRouter();
const drawer = ref(false);

const items = computed(() => [
  { key: "dashboard", icon: () => h(DashboardOutlined), label: "داشبورد" },
  { key: "products", icon: () => h(ShoppingOutlined), label: "محصولات" },
  { key: "categories", icon: () => h(AppstoreOutlined), label: "دسته‌بندی‌ها" },
  { key: "sections", icon: () => h(LayoutOutlined), label: "بخش‌های سایت" },
  { key: "messages", icon: () => h(MailOutlined), label: "پیام‌های تماس" },
  { key: "media", icon: () => h(FileImageOutlined), label: "کتابخانه رسانه" },
  ...(auth.isAdmin ? [{ key: "users", icon: () => h(TeamOutlined), label: "کاربران" }] : []),
]);

/** menu entry to highlight for nested pages (products/12 → products) */
const MENU_OF: Record<string, string> = {
  "product-new": "products",
  "product-edit": "products",
  "category-new": "categories",
  "category-edit": "categories",
  "section-edit": "sections",
};
const selected = computed(() => {
  const name = String(route.name ?? "");
  return [MENU_OF[name] ?? name];
});

const go = ({ key }: { key: string | number }) => {
  drawer.value = false;
  void router.push({ name: String(key) });
};

watch(() => route.fullPath, () => (drawer.value = false));
</script>

<template>
  <a-layout class="min-h-screen">
    <a-layout-sider
      :width="232"
      breakpoint="lg"
      collapsed-width="0"
      :trigger="null"
      class="!hidden lg:!block"
      style="background: #0b1224"
    >
      <div class="flex items-center gap-3 px-5 py-5">
        <img src="/favicon.svg" alt="" class="size-8" />
        <div class="leading-tight text-white">
          <div class="font-bold">ایمن پیشگامان</div>
          <div class="text-[11px] text-white/50">پنل مدیریت</div>
        </div>
      </div>
      <a-menu
        theme="dark"
        mode="inline"
        :selected-keys="selected"
        :items="items"
        style="background: transparent; border: 0"
        @click="go"
      />
    </a-layout-sider>

    <a-drawer v-model:open="drawer" placement="right" :width="260" :body-style="{ padding: 0, background: '#0b1224' }" :closable="false">
      <a-menu theme="dark" mode="inline" :selected-keys="selected" :items="items" style="background: transparent; border: 0" @click="go" />
    </a-drawer>

    <a-layout>
      <a-layout-header
        class="flex items-center justify-between gap-4 border-b border-gray-200 !bg-white !px-4 md:!px-6"
        style="height: 60px; line-height: 60px"
      >
        <div class="flex items-center gap-3">
          <a-button class="lg:!hidden" @click="drawer = true">
            <template #icon><MenuOutlined /></template>
          </a-button>
          <a :href="SITE_URL" target="_blank" rel="noopener" class="flex items-center gap-1.5 text-sm text-gray-500 hover:text-[#ff5a00]">
            <ExportOutlined />
            مشاهده سایت
          </a>
        </div>

        <a-dropdown placement="bottomLeft">
          <a-button type="text" class="flex items-center gap-2">
            <UserOutlined />
            <span>{{ auth.user?.name }}</span>
            <a-tag v-if="auth.user" class="!m-0" :color="auth.isAdmin ? 'orange' : 'blue'">
              {{ ROLE_LABELS[auth.user.role] }}
            </a-tag>
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item key="profile" @click="router.push({ name: 'profile' })">
                <UserOutlined /> حساب کاربری
              </a-menu-item>
              <a-menu-item key="logout" danger @click="auth.logout()">
                <LogoutOutlined /> خروج
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </a-layout-header>

      <a-layout-content class="p-4 md:p-6">
        <!-- keyed by path (not query) so /sections/hero → /sections/about gets a fresh page -->
        <RouterView v-slot="{ Component, route: r }">
          <component :is="Component" :key="r.path" />
        </RouterView>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>