fix: 🐛 update sidebar styling

src/components/sidebar/AppSidebar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
-import type { MenuOption } from "naive-ui";
+import type { MenuInst, MenuOption } from "naive-ui";
 import { NLayoutSider, NMenu, NSpace } from "naive-ui";
 import { computed, h } from "vue";
+// import {ref} from "vue/dist/vue";
 import { RouterLink, useRoute, useRouter } from "vue-router";
 
 import { useSidebarStore } from "@/stores/sidebar";
@@ -380,6 +381,20 @@ const defaultExpandedKeys = computed(() => {
   }
   return [];
 });
+
+const selectedKeyRef = ref("1");
+const menuInstRef = ref<MenuInst | null>(null);
+
+const selectAndExpand = (key: string) => {
+  selectedKeyRef.value = key;
+  menuInstRef.value?.showOption(key);
+};
+
+router.beforeEach((to, from) => {
+  if (typeof to.name !== "string") return;
+  const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
+  selectAndExpand(name);
+});
 </script>
 
 <template>
@@ -397,6 +412,8 @@ const defaultExpandedKeys = computed(() => {
     <n-space vertical justify="space-between" class="h-full">
       <div class="flex flex-col justify-start divide-y">
         <n-menu
+          ref="menuInstRef"
+          v-model:value="selectedKeyRef"
           :collapsed-width="64"
           :collapsed-icon-size="22"
           :default-expanded-keys="defaultExpandedKeys"
@@ -407,6 +424,8 @@ const defaultExpandedKeys = computed(() => {
       </div>
 
       <n-menu
+        ref="menuInstRef"
+        v-model:value="selectedKeyRef"
         :collapsed-width="64"
         :collapsed-icon-size="22"
         :collapsed="sidebarCollapsed"

src/components/sidebar/DatasetSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue";
-import type { MenuOption } from "naive-ui";
+import type { MenuInst, MenuOption } from "naive-ui";
 import { NLayoutSider, NMenu, NSpace } from "naive-ui";
 import { computed, h, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
@@ -197,6 +197,20 @@ const showSidebar = computed(() => {
 
   return false;
 });
+
+const selectedKeyRef = ref("1");
+const menuInstRef = ref<MenuInst | null>(null);
+
+const selectAndExpand = (key: string) => {
+  selectedKeyRef.value = key;
+  menuInstRef.value?.showOption(key);
+};
+
+router.beforeEach((to, from) => {
+  if (typeof to.name !== "string") return;
+  const name: string = to.meta && to.meta.menuItem ? (to.meta.menuItem as string) : to.name;
+  selectAndExpand(name);
+});
 </script>
 
 <template>
@@ -213,6 +227,8 @@ const showSidebar = computed(() => {
   >
     <n-space vertical justify="space-between" class="h-full">
       <n-menu
+        ref="menuInstRef"
+        v-model:value="selectedKeyRef"
         :collapsed-width="64"
         :collapsed-icon-size="22"
         :default-expanded-keys="['dataset:metadata']"

src/router/index.ts

@@ -111,6 +111,7 @@ const router = createRouter({
           name: "studies:new-study",
           path: "new",
           component: NewStudy,
+          meta: { menuItem: "studies:all-studies" },
         },
       ],
     },
@@ -140,6 +141,7 @@ const router = createRouter({
               name: "study:add-participant",
               path: "add",
               component: AddParticipant,
+              meta: { menuItem: "study:participants" },
             },
           ],
         },
@@ -170,6 +172,7 @@ const router = createRouter({
               name: "dataset:new",
               path: "new",
               component: NewDataset,
+              meta: { menuItem: "study:all-datasets" },
             },
           ],
         },
@@ -283,6 +286,7 @@ const router = createRouter({
                       name: "dataset:publish:versions:new",
                       path: "new",
                       component: NewVersion,
+                      meta: { menuItem: "dataset:publish:versions" },
                     },
                     {
                       path: ":versionId",
@@ -291,31 +295,37 @@ const router = createRouter({
                           name: "dataset:publish:version:participants",
                           path: "participants",
                           component: PublishSelectParticipants,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:study-metadata",
                           path: "study-metadata",
                           component: PublishStudyMetadata,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:dataset-metadata",
                           path: "dataset-metadata",
                           component: PublishDatasetMetadata,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:changelog",
                           path: "changelog",
                           component: PublishChangelog,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:readme",
                           path: "additional-readme",
                           component: PublishReadme,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                         {
                           name: "dataset:publish:version:summary",
                           path: "summary",
                           component: PublishSummary,
+                          meta: { menuItem: "dataset:publish:versions" },
                         },
                       ],
                     },
@@ -433,6 +443,7 @@ const router = createRouter({
       name: "all-settings",
       path: "/settings",
       component: AllSettings,
+      meta: { menuItem: "settings" },
     },
     {
       name: "help",