pelican-jdr/src/components/layout/SideBar.vue
2023-02-08 00:40:10 +01:00

36 lines
935 B
Vue

<script setup lang="ts">
import { useConfigStore } from "@/stores/config";
import { computed } from "vue";
const store = useConfigStore();
const sidebar = computed(() => {
return store.getSidebar() ?? [{ title: "", id: 0, links: [] }];
});
const linkBase = computed(() => {
if (store.isJdrLoaded()) {
return `jdr/${store.currentJdr}`;
} else {
return `jdr`;
}
});
</script>
<template>
<aside id="sidebar" class="bg-dark fg-light menu">
<h1 class="title-5 fg-light">Navigation</h1>
<ul v-for="item in sidebar" :key="item.id">
<div class="menu-divider" v-if="item.title">{{ item.title }}</div>
<li v-for="(link, index) in item.links" :key="index">
<router-link
:to="`/${linkBase}/${link.path}`"
class="menu-item"
:replace="true"
v-if="!link.isHidden"
>{{ link.title }}</router-link
>
</li>
</ul>
</aside>
</template>