src/components/layout/SideBar.vue

@@ -1,11 +1,23 @@
+<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: [] };
+});
+</script>
+
 <template>
   <aside id="sidebar" class="bg-dark fg-light menu">
     <h1 class="title-5 fg-light">Navigation</h1>
-    <ul>
-      <li>
-        <router-link to="/jdr/core" class="menu-item"
-          >Règles de base</router-link
-        >
+    <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="`/jdr/core/${link.path}`" class="menu-item" :replace="true">{{
+          link.title
+        }}</router-link>
       </li>
     </ul>
   </aside>