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

48 lines
1.9 KiB
Vue

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { useItem } from '../stores/item';
const route = useRoute()
const router = useRouter()
const page = useItem()
console.log(router)
</script>
<template>
<div class="nav">
<div class="nav-group">
<span class="nav-icon" :class="[{ 'active': route.name == 'home' || route.fullPath == '/' }]">
<RouterLink :to="`/${page.slug}`">
<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}`">
<i-mdi:video-3d />
</RouterLink>
</span>
<span class="nav-icon" style="font-size: 1.375rem;" v-if="false">
<i-mdi:vector-arrange-below />
</span>
</div>
<div class="nav-group">
<span class="nav-icon" :class="[{ disabled: router.options.history.state.back == null }]">
<RouterLink :to="(router.options.history.state.back as string) ?? '/'">
<i-mdi:arrow-left />
</RouterLink>
</span>
<span class="nav-icon" :class="[{ disabled: router.options.history.state.forward == null }]">
<RouterLink :to="(router.options.history.state.forward as string) ?? '/'">
<i-mdi:arrow-right />
</RouterLink>
</span>
</div>
<div class="nav-content">
Нажмите на <span class="nav-icon">
<i-icon-park-solid-left-c />
</span> вверху экрана, чтобы узнать подробнее про объекты на глэмпинге
</div>
</div>
</template>