front/src/assets/nav.scss

@@ -38,6 +38,7 @@ $white: #fff;
         a[href].router-link-active {
             color: $white;
             line-height: 0;
+            text-decoration: none;
         }
 
         &.active {

front/src/components/nav.vue

@@ -4,9 +4,25 @@ import icon_home from '../assets/btn/home.svg';
 import icon_gallery from '../assets/btn/gallery.svg';
 import { useRoute } from 'vue-router';
 import { useItem } from '../stores/item';
+import { onMounted, ref } from 'vue';
+import { SERVER_URL } from '../constants';
 
 const route = useRoute()
 const pageStore = useItem()
+
+const items = ref([] as { name: string, slug: string }[])
+
+onMounted(async () => {
+    const res = await fetch(`${SERVER_URL}/api/item/`)
+    const data = await res.json()
+
+    data.forEach((element: any) => {
+        items.value.push({
+            name: element.name,
+            slug: element.slug,
+        })
+    });
+})
 </script>
 <template>
     <div class="nav">
@@ -31,16 +47,25 @@ const pageStore = useItem()
             <template v-if="['main', 'home_no'].includes(route.name as string)">
                 Нажмите на <span class="nav-icon">
                     <icon_3d />
-                </span>, чтобы узнать подробнее про объекты на глэмпинге
+                </span>, чтобы узнать подробнее про объекты
             </template>
             <template v-if="['scene'].includes(route.name as string)">
                 Нажмите на <span class="nav-icon">
                     <i-icon-park-solid-left-c />
-                </span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
+                </span> вверху экрана, чтобы узнать подробнее про объекты
             </template>
             <template v-if="['gallery'].includes(route.name as string)">
                 Картинки можно перетаскивать
             </template>
         </div>
+        <div class="nav-group">
+            <template v-for="item in items">
+                <span class="nav-icon" :class="[{ active: item.slug == pageStore.page.slug}]">
+                    <RouterLink :to="`/${item.slug}`" :title="item.name">
+                        {{ item.name[0].toUpperCase() }}
+                    </RouterLink>
+                </span>
+            </template>
+        </div>
     </div>
 </template>