<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>
