sidebar test

front/components.d.ts

@@ -13,12 +13,19 @@ declare module 'vue' {
     Gallery: typeof import('./src/components/Promo/gallery.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
+    IIconMdiHomeOutline: typeof import('~icons/ic/on-mdi-home-outline')['default']
+    IIconParkSolidLeftC: typeof import('~icons/icon-park-solid/left-c')['default']
+    'IMdi:arrowLeft': typeof import('~icons/mdi/arrow-left')['default']
+    'IMdi:arrowRight': typeof import('~icons/mdi/arrow-right')['default']
+    'IMdi:vectorArrangeBelow': typeof import('~icons/mdi/vector-arrange-below')['default']
+    'IMdi:video3d': typeof import('~icons/mdi/video3d')['default']
     IMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
     IMdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     IMdiClose: typeof import('~icons/mdi/close')['default']
     IMdiFile: typeof import('~icons/mdi/file')['default']
     IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
     IMdiHome: typeof import('~icons/mdi/home')['default']
+    IMdiHomeOutline: typeof import('~icons/mdi/home-outline')['default']
     IMdiMonitorScreenshot: typeof import('~icons/mdi/monitor-screenshot')['default']
     IMdiPagePreviousOutline: typeof import('~icons/mdi/page-previous-outline')['default']
     IMdiShop: typeof import('~icons/mdi/shop')['default']

front/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@fireworks-js/vue": "^2.10.7",
+        "@iconify-json/icon-park": "^1.1.14",
+        "@iconify-json/icon-park-solid": "^1.1.15",
         "@iconify/vue": "^4.1.2",
         "@monogrid/gainmap-js": "^3.0.5",
         "@tresjs/cientos": "^3.9.0",
@@ -436,6 +438,24 @@
         "vue": ">=3.0.0"
       }
     },
+    "node_modules/@iconify-json/icon-park": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/icon-park/-/icon-park-1.1.14.tgz",
+      "integrity": "sha512-D/Tyww0fPhEwLqeQuzKMxE4HKjWsCG8TPRZsUIgjGh1qBOI3Ad9G5y0mQi4mLBtHrdCPdfbCz2oZJHxPoLyScA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify-json/icon-park-solid": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@iconify-json/icon-park-solid/-/icon-park-solid-1.1.15.tgz",
+      "integrity": "sha512-fFuDj5H8+x/V2hzknhpBifFBIOVP/sm2ElGQ0M1W4d0EQ5f7Pss1v7tfmDSQR2F6eISKDjuA2yyT7fF/C366Hw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/mdi": {
       "version": "1.1.66",
       "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.1.66.tgz",

front/package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@fireworks-js/vue": "^2.10.7",
+    "@iconify-json/icon-park": "^1.1.14",
+    "@iconify-json/icon-park-solid": "^1.1.15",
     "@iconify/vue": "^4.1.2",
     "@monogrid/gainmap-js": "^3.0.5",
     "@tresjs/cientos": "^3.9.0",

front/src/assets/main.scss

@@ -1,6 +1,9 @@
 @import 'grid.scss';
 @import 'fonts.scss';
 
+body {
+    font-family: 'Montserrat';
+}
 a[href] {
     color: #048280;
 

front/src/assets/nav.scss

@@ -49,5 +49,19 @@ $white: #fff;
 
     &-content {
         flex-grow: 1;
+        text-align: right;
+        font-size: 1.125rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+
+        .nav-icon {
+            margin: 0 0.25rem;
+
+            font-size: 1.25em;
+            width: 1.25em;
+            height: 1.25em;
+        }
     }
 }

front/src/assets/sidebar.scss

@@ -6,7 +6,7 @@ $primary: #E75B12;
 .homelink {
     position: absolute;
     right: 2rem;
-    top: 4rem;
+    top: 2rem;
 
     transition: right 300ms linear;
 
@@ -16,19 +16,11 @@ $primary: #E75B12;
     }
 
     a {
-        background-color: $bg;
         color: $textColor;
         line-height: 1;
-        font-size: 3rem;
+        font-size: 2.5rem;
-        height: 7rem;
         display: flex;
         align-items: center;
-        border-radius: 1rem;
-        opacity: 0.97;
-
-        svg {
-            transition: all 400ms linear;
-        }
     }
 
     &.open {
@@ -72,7 +64,6 @@ $primary: #E75B12;
         padding: 1.5rem;
 
         color: $textColor;
-        font-family: 'Montserrat';
     }
 
     &-list {}

front/src/components/Promo/main.vue

@@ -84,14 +84,9 @@ const sidebarFunc = () => {
             </TresCanvas>
             <div class="homelink" :class="[{ open: sidebar.is_open }]">
                 <a href="#" @click.prevent="sidebarFunc">
-                    <i-mdi-chevron-left />
+                    <i-icon-park-solid-left-c />
                 </a>
             </div>
-            <div class="homelink main" v-if="route.params.item">
-                <RouterLink :to="`/${route.params.item.toString()}`" @click.prevent="sidebarFunc">
-                    <i-mdi-home />
-                </RouterLink>
-            </div>
         </div>
         <Sidebar />
     </div>

front/src/components/nav.vue

@@ -14,28 +14,30 @@ const page = useItem()
         <div class="nav-group">
             <span class="nav-icon" :class="[{ 'active': route.name == 'home' || route.fullPath == '/' }]">
                 <RouterLink :to="`/${page.slug}`">
-                    <Icon icon="mdi:home-outline" />
+                    <i-mdi-home-outline />
                 </RouterLink>
             </span>
             <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" />
+                    <i-mdi:video-3d />
                 </RouterLink>
             </span>
             <span class="nav-icon" style="font-size: 1.375rem;">
-                <Icon icon="mdi:vector-arrange-below" />
+                <i-mdi:vector-arrange-below />
             </span>
         </div>
         <div class="nav-group">
             <span class="nav-icon">
-                <Icon icon="mdi:arrow-left" />
+                <i-mdi:arrow-left />
             </span>
             <span class="nav-icon">
-                <Icon icon="mdi:arrow-right" />
+                <i-mdi:arrow-right />
             </span>
         </div>
         <div class="nav-content">
-
+            Нажмите на <span class="nav-icon">
+                <i-mdi:arrow-left />
+            </span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
         </div>
     </div>
 </template>