front/src/App.vue

@@ -2,5 +2,5 @@
   <Suspense>
     <RouterView />
   </Suspense>
-  <Nav/>
+  <Nav />
 </template>

front/src/assets/nav.scss

@@ -5,7 +5,7 @@ $white: #fff;
 .nav {
     background-color: $white;
     padding: 1rem;
-    height: 2rem;
+    // height: 2rem;
     position: fixed;
     right: 0;
     left: 0;
@@ -20,8 +20,8 @@ $white: #fff;
         justify-content: center;
         align-items: center;
         font-size: 1.75rem;
-        width: 2rem;
-        height: 2rem;
+        width: 2.25rem;
+        height: 2.25rem;
         border-radius: 50%;
         overflow: hidden;
 
@@ -32,6 +32,7 @@ $white: #fff;
         a,
         a[href].router-link-active {
             color: $white;
+            line-height: 0;
         }
 
         &.active {

front/src/components/Promo/index.vue

@@ -2,19 +2,16 @@
 import { useRouter, useRoute } from "vue-router";
 
 import KLogo from "../../assets/promo/logo.svg";
-import { SERVER_URL } from "../../constants";
-
-import Gallery from "./gallery.vue";
+import { useItem } from "../../stores/item";
 
 const router = useRouter()
 const route = useRoute()
+const page = useItem()
 
 const startColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 const endColor = `hsl(${(Math.random() * 360).toFixed()}, 100%, 50%)`
 
-const res = await fetch(`${SERVER_URL}/api/item/${route.params.item ? (route.params.item + '/') : '?is_front=true'}`)
-const pageArray = await res.json()
-const page = Array.isArray(pageArray) ? pageArray[0] : pageArray
+await page.load(route.params)
 </script>
 <template>
     <div class="main">

front/src/components/nav.vue

@@ -1,32 +1,28 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
 import { useRoute } from 'vue-router';
-import { usePromoSidebar } from '../stores/promo_sidebar';
+
+import { useItem } from '../stores/item';
 
 const route = useRoute()
-const sidebar = usePromoSidebar()
-const sidebarFunc = () => {
-    if (sidebar.is_open) {
-        sidebar.close()
-    } else {
-        sidebar.open()
-    }
-}
+const page = useItem()
 
-console.log(route.params)
+// console.log(route.name)
 </script>
 <template>
     <div class="nav">
         <div class="nav-group">
-            <span class="nav-icon" :class="[{ 'active': route.name == 'home' }]">
-                <RouterLink :to="`/${route.params.item ? route.params.item.toString() : ''}`" @click.prevent="sidebarFunc">
+            <span class="nav-icon" :class="[{ 'active': route.name == 'home' || route.fullPath == '/' }]">
+                <RouterLink :to="`/${page.slug}`">
                     <Icon icon="mdi:home-outline" />
                 </RouterLink>
             </span>
-            <span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]">
-                <Icon icon="mdi:video-3d" />
+            <span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]" style="font-size: 1.875rem;">
+                <RouterLink :to="`/${page.slug}/${page.scene_3d}`">
+                    <Icon icon="mdi:video-3d" />
+                </RouterLink>
             </span>
-            <span class="nav-icon">
+            <span class="nav-icon" style="font-size: 1.375rem;">
                 <Icon icon="mdi:vector-arrange-below" />
             </span>
         </div>

front/src/index.d.ts

@@ -76,4 +76,19 @@ interface EnvVars {
     clear_color?: string,
     env_displacementmap?: string,
     env_normalmap?: string
+}
+
+interface PageItem {
+    id: number;
+    images: Image[];
+    name: string;
+    slug: string;
+    is_front: boolean;
+    scene_3d: number;
+}
+interface Image {
+    id: number;
+    file: string;
+    alt: string;
+    title: string;
 }

front/src/main.ts

@@ -9,7 +9,7 @@ import Promo from './components/Promo/index.vue'
 import PromoMain from './components/Promo/main.vue'
 
 const routes = [
-    { path: '/', component: Promo, name: 'index' },
+    { path: '/', component: Promo, name: 'home_no' },
     { path: '/:item', component: Promo, name: 'home' },
     { path: '/:item/:target', component: PromoMain, name: 'scene' },
 ]

front/src/stores/item.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { SERVER_URL } from '../constants'
+export const useItem = defineStore('item', {
+    state: () => {
+        return {
+
+        } as PageItem
+    },
+    actions: {
+        async load(params: any) {
+            const res = await fetch(`${SERVER_URL}/api/item/${params.item ? (params.item + '/') : '?is_front=true'}`)
+            const pageArray = await res.json()
+            const page = Array.isArray(pageArray) ? pageArray[0] : pageArray
+            // this.$state = Object.assign(this.$state, page)
+            for (const key in page) {
+                this[key] = page[key]
+            }
+            return page
+        }
+    }
+})