part sidebar styles

front/src/assets/main.scss

@@ -1,6 +1,9 @@
 @import 'grid.scss';
 @import 'fonts.scss';
 
+:root {
+    --primary-color: #ACD0E5;
+}
 body {
     font-family: 'Montserrat';
 }

front/src/assets/nav.scss

@@ -25,7 +25,7 @@ $white: #fff;
         border-radius: 50%;
         overflow: hidden;
 
-        background-color: $bg;
+        background-color: var(--primary-color);
         color: $white;
         cursor: pointer;
 
@@ -36,7 +36,7 @@ $white: #fff;
         }
 
         &.active {
-            background-color: $activeBg;
+            background-image: linear-gradient(fade-out(#000, 0.5), fade-out(#000, 0.5));
         }
     }
 

front/src/assets/sidebar.scss

@@ -1,7 +1,8 @@
-$bg: #2D3031;
+$bg: fade-out(#fff, 0.05);
-$textColor: #fff;
+$textColor: #484848;
 $textColor2: #9A9697;
 $primary: #E75B12;
+$boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
 
 .homelink {
     position: absolute;
@@ -10,19 +11,18 @@ $primary: #E75B12;
 
     transition: right 300ms linear;
 
-    &.main {
-        right: auto;
-        left: 2rem;
-    }
-
     a {
-        color: $textColor;
+        color: $bg;
         line-height: 1;
         font-size: 2.5rem;
         display: flex;
         align-items: center;
     }
 
+    svg {
+        filter: drop-shadow($boxShadow);
+    }
+
     &.open {
         right: 31vw;
 
@@ -35,7 +35,7 @@ $primary: #E75B12;
 .sidebar {
     position: fixed;
     width: 30vw;
-    top: 4rem;
+    top: 2rem;
     right: -50%;
     bottom: 0;
     transition: all 300ms linear;
@@ -43,6 +43,8 @@ $primary: #E75B12;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    box-shadow: $boxShadow;
+    color: #484848;
 
     &.open {
         right: 0;
@@ -58,10 +60,10 @@ $primary: #E75B12;
         overflow: auto;
 
         background-color: $bg;
-        border-top-left-radius: 2rem;
+        border-top-left-radius: 0.5rem;
-        border-bottom-left-radius: 2rem;
+        border-bottom-left-radius: 0.5rem;
 
-        padding: 1.5rem;
+        // padding: 1.5rem;
 
         color: $textColor;
     }
@@ -84,11 +86,21 @@ $primary: #E75B12;
     }
 
     h2 {
-        font-size: 3rem;
+        font-size: 1.5rem;
         text-align: center;
         margin-bottom: 1rem;
+        padding: 0.5rem 0;
+        min-height: 3rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
 
-        font-weight: 800;
+        font-weight: 700;
+        text-transform: uppercase;
+        line-height: 1;
+
+        border-bottom: 2px solid var(--primary-color);
     }
 
     p {

front/src/components/Promo/env.vue

@@ -44,6 +44,8 @@ const loadEnv = async () => {
     c.set(props.clear_color || PROMOBG)
     renderer.value.setClearColor(c)
     scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
+
+    document.documentElement.style.setProperty('--primary-color', props.clear_color)
 }
 
 onMounted(async () => {

front/src/components/Promo/main.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
 import { useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas, useLoader } from '@tresjs/core';
+import { TresCanvas } from '@tresjs/core';
 import { OrbitControls, Stats } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
 import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
-import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { PROMOBG } from '../../constants';
+import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { useLoading } from '../../stores/loading';
+import { useItem } from '../../stores/item';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -46,6 +47,7 @@ const set_model_load_status = (status: boolean) => {
 }
 
 const route = useRoute()
+
 const source = ref(route.params.target ? (route.params.target.toString() + '/') : '1/')
 watch(() => route.params.target, () => {
     let t = '1/'
@@ -57,7 +59,6 @@ watch(() => route.params.target, () => {
     }
 }, { deep: true })
 
-
 const sidebarFunc = () => {
     if (sidebar.is_open) {
         sidebar.close()
@@ -65,12 +66,19 @@ const sidebarFunc = () => {
         sidebar.open()
     }
 }
+
+onMounted(() => {
+    const page = useItem();
+    if (!page.slug) {
+        page.load(route.params)
+    }
+})
 </script>
 <template>
     <div>
         <div v-if="models_loading"
             style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
-            {{loading_store.getStatus()}}
+            {{ loading_store.getStatus() }}
         </div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
             <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"

front/src/stores/loading.ts

@@ -22,7 +22,7 @@ export const useLoading = defineStore('loading', {
     actions: {
         getStatus() {
             if (this.status == 'model') {
-                return lines[this.status] + ' ' + this.count
+                return `${lines[this.status]}${this.count ? (' ' + (this.count + 1)) : ''}`
             }
             return lines[this.status]
         }

front/src/stores/timer.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-const BASE_TIMER = 10
+const BASE_TIMER = 100
 interface state {
     timer_el: any,
     timer_func: any,