admin panel beter ui

apps/admin-panel/src/layouts/components/TheNavbar.vue

@@ -13,6 +13,14 @@
         <MenuFoldOutlined v-else />
       </a-button>
       <span class="page-title">{{ pageTitle }}</span>
+      <a-breadcrumb v-if="breadcrumb" class="breadcrumb">
+        <a-breadcrumb-item v-for="(crumb, i) in breadcrumb" :key="i">
+          <router-link v-if="crumb.url && !crumb.active" :to="crumb.url">
+            {{ crumb.title }}
+          </router-link>
+          <span v-else>{{ crumb.title }}</span>
+        </a-breadcrumb-item>
+      </a-breadcrumb>
     </div>
 
     <div class="nav-right">
@@ -43,6 +51,12 @@ import { useRoute, useRouter } from 'vue-router';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
 import { useAuthStore } from '../../stores/auth';
 
+interface Crumb {
+  title: string;
+  url?: string;
+  active?: boolean;
+}
+
 defineProps<{ collapsed?: boolean }>();
 defineEmits<{ (e: 'toggle-sidebar'): void }>();
 
@@ -51,6 +65,7 @@ const router = useRouter();
 const auth = useAuthStore();
 
 const pageTitle = computed(() => (route.meta?.pageTitle as string) ?? '');
+const breadcrumb = computed(() => route.meta?.breadcrumb as Crumb[] | undefined);
 const displayName = computed(() => auth.user?.name ?? auth.user?.fullName ?? 'کاربر');
 const initial = computed(() => displayName.value.trim().charAt(0) || 'ک');
 
@@ -80,6 +95,9 @@ function onLogout() {
   font-size: 16px;
   color: #1c2d56;
 }
+.breadcrumb {
+  font-size: 13px;
+}
 .user-chip {
   display: inline-flex;
   align-items: center;