feat: add position page

app.vue

@@ -1,16 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <UContainer>
-    <UCard class="mt-10">
-      <template #header>
-        <div class="flex justify-between">
-          <h1>Welcome to Nuxt UI Starter</h1>
-          <ColorScheme><USelect v-model="$colorMode.preference" :options="['system', 'light', 'dark']" /></ColorScheme>
-          <UButton icon="i-heroicons-pencil-square" />
-        </div>
-      </template>
-      <UButton icon="i-heroicons-book-open" to="https://ui.nuxt.com" target="_blank">
-        Open Nuxt UI Documentation
-      </UButton>
-    </UCard>
-  </UContainer>
+  <NuxtPage />
 </template>

pages/catalog/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CatalogPage } from '~/src/pages/catalog'
+</script>
+
+<template>
+  <CatalogPage />
+</template>
+
+<style scoped>
+
+</style>

pages/catalog/positions/[id].vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import PositionPage from '~/src/pages/position/ui/PositionPage.vue'
+</script>
+
+<template>
+  <PositionPage />
+</template>
+
+<style scoped>
+
+</style>

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="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'