demo-int-table/front/src/components/nav.vue

46 lines
2.1 KiB
Vue

<script setup lang="ts">
import icon_3d from '../assets/btn/3D_sm.svg';
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';
const route = useRoute()
const pageStore = useItem()
</script>
<template>
<div class="nav">
<div class="nav-group">
<span class="nav-icon" :class="[{ 'active': ['main', 'home_no'].includes(route.name as string) }]">
<RouterLink :to="`/${pageStore.page.slug}`">
<icon_home />
</RouterLink>
</span>
<span class="nav-icon" :class="[{ 'active': route.name == 'scene' }]" style="font-size: 1.875rem;">
<RouterLink :to="`/${pageStore.page.slug}/${pageStore.page.scene_3d}`">
<icon_3d />
</RouterLink>
</span>
<span class="nav-icon" :class="[{ 'active': route.name == 'gallery' }]" style="font-size: 1.375rem;">
<RouterLink :to="`/${pageStore.page.slug}/gallery`">
<icon_gallery />
</RouterLink>
</span>
</div>
<div class="nav-content">
<template v-if="['main', 'home_no'].includes(route.name as string)">
Нажмите на <span class="nav-icon">
<icon_3d />
</span>, чтобы узнать подробнее про объекты на глэмпинге
</template>
<template v-if="['scene'].includes(route.name as string)">
Нажмите на <span class="nav-icon">
<i-icon-park-solid-left-c />
</span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
</template>
<template v-if="['gallery'].includes(route.name as string)">
Картинки можно перетаскивать
</template>
</div>
</div>
</template>