feat: add position page

src/pages/catalog/ui/CatalogPage.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { ProductCard } from '~/src/entities/product'
 import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
+import { Sidebar } from '~/src/widgets/sidebar'
 
 const { data: positions } = useCRMGetPositions('0')
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 pt-39 pr-31 pl-12 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 gap-12 pl-31">
+    <Sidebar />
+    <div class="flex flex-col gap-8 pr-31 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>
 </template>

src/pages/position/index.ts

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

src/pages/position/ui/PositionPage.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ProductCard } from '~/src/entities/product'
+import { useCRMGetPositions } from '~/src/shared/api/crm/crm'
+import { Sidebar } from '~/src/widgets/sidebar'
+
+const route = useRoute()
+
+const { data: positions } = useCRMGetPositions(route.params.id as string)
+</script>
+
+<template>
+  <div class="flex gap-12 pl-31">
+    <Sidebar />
+    <div class="flex flex-col gap-8 pr-31 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>
+</template>

src/pages/position/ui/index.ts

@@ -0,0 +1 @@
+export { default as PositionPage } from './PositionPage.vue'

src/widgets/sidebar/index.ts

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

src/widgets/sidebar/ui/Sidebar.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useCRMGetCatalog } from '~/src/shared/api/crm/crm'
+
+const { data } = useCRMGetCatalog()
+
+const links = computed(() =>
+  data.value?.data.categories?.[0].children?.map(link => ({
+    label: link.name,
+    to: `/catalog${link.uri}`,
+  })))
+</script>
+
+<template>
+  <div class="w-58">
+    <UVerticalNavigation :links />
+  </div>
+</template>

src/widgets/sidebar/ui/index.ts

@@ -0,0 +1 @@
+export { default as Sidebar } from './Sidebar.vue'