feat: add breadcrumbs

src/pages/position/ui/PositionPage.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { ProductCard } from '~/src/entities/product'
-import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
+import { useCRMGetCatalog, useCRMGetPositions } from '~/src/shared/api/crm/crm'
 import { Sidebar } from '~/src/widgets/sidebar'
 import { StandardLayout } from '~/src/shared/ui'
 import { Header } from '~/src/widgets/header'
 import { Footer } from '~/src/widgets/footer'
+import Breadcrumbs from '~/src/features/breadcrumbs/ui/Breadcrumbs.vue'
 
 const route = useRoute()
 
 const { data: positions } = useCRMGetPositions(route.params.id as string)
+const { data: catalog } = useCRMGetCatalog()
+
+const pageName = computed(() => catalog.value?.data?.categories?.[0]?.children?.find(category => category.id === route.params.id)?.name)
 </script>
 
 <template>
@@ -16,11 +20,19 @@ const { data: positions } = useCRMGetPositions(route.params.id as string)
     <template #header>
       <Header />
     </template>
-    <div class="flex gap-12">
-      <Sidebar />
-      <div class="flex flex-col gap-8 pb-34">
-        <div class="grid grid-cols-4 gap-4">
-          <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+    <div class="flex flex-col gap-8">
+      <div class="flex flex-col gap-4">
+        <Breadcrumbs />
+        <h1 class="text-4xl font-black">
+          {{ pageName }}
+        </h1>
+      </div>
+      <div class="flex gap-12">
+        <Sidebar />
+        <div class="flex flex-col gap-8 pb-34">
+          <div class="grid grid-cols-4 gap-4">
+            <ProductCard v-for="product in positions?.data.products" :key="product.id" class="basis-1/4" :product />
+          </div>
         </div>
       </div>
     </div>