feat: add breadcrumbs

src/features/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './ui'

src/features/breadcrumbs/ui/Breadcrumbs.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useCRMGetBreadcrumbs, useCRMGetCatalog } from '~/src/shared/api/crm/crm'
+
+const route = useRoute()
+
+const { data: catalogData } = useCRMGetCatalog()
+const { data: breadcrumbsData } = useCRMGetBreadcrumbs(route.params.id as string)
+
+const links = computed(() => {
+  const breadcrumbs = [{
+    label: 'Каталог',
+    to: '/catalog',
+  }]
+
+  if (!catalogData.value?.data.categories?.length) {
+    return breadcrumbs
+  }
+
+  if (route.name === 'catalog-positions-id') {
+    const category = catalogData.value.data.categories[0].children?.find(category => category.id === route.params.id)
+
+    breadcrumbs.push({
+      label: category?.name || 'Категория',
+      to: `/catalog/${category?.uri}`,
+    })
+  }
+
+  if (route.name === 'products-id') {
+    breadcrumbs.push({
+      label: breadcrumbsData.value?.data.categories?.[0].name || 'Продукт',
+      to: route.path,
+    })
+  }
+
+  return breadcrumbs
+})
+</script>
+
+<template>
+  <UBreadcrumb :links />
+</template>

src/features/breadcrumbs/ui/index.ts

@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs.vue'

src/pages/catalog/ui/CatalogPage.vue

@@ -5,6 +5,7 @@ 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 { data: positions } = useCRMGetPositions('0')
 </script>
@@ -14,14 +15,24 @@ const { data: positions } = useCRMGetPositions('0')
     <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">
+          Все товары
+        </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>
+
     <template #footer>
       <Footer />
     </template>

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>

src/shared/ui/layouts/StandardLayout.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-full ma ">
+  <div class="flex flex-col w-full h-full justify-between">
     <div class="border-b border-gray-200 px-31 sticky top-0 z-50 bg-white flex-shrink-0">
       <slot name="header" />
     </div>

src/widgets/header/ui/Header.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-
+function goToCatalogPage() {
+  navigateTo({
+    path: '/catalog',
+  })
+}
 </script>
 
 <template>
@@ -9,7 +13,7 @@
       alt="svg"
     >
     <div class="flex gap-5 w-full">
-      <UButton size="xl" icon="heroicons-bars-3">
+      <UButton size="xl" icon="heroicons-bars-3" @click="goToCatalogPage">
         Каталог
       </UButton>
       <UInputMenu placeholder="Поиск по каталогу" size="xl" class="w-full" leading-icon="heroicons-magnifying-glass" />