Improve main menu active page indicator

Syslifters · Dec 13, 2023 · 8347300 · 8347300
1 parent 23f18f4
commit 8347300
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
@@ -41,13 +41,3 @@ const theme = computed(() => {
   }
 });
 </script>
-
-<!-- TODO: [x] font: Noto Sans instead of Exo 2 -->
-<!-- TODO: [x] container without fluid for settings pages and lists -->
-<!-- TODO: [x] list views: tabs below list instead of filters -->
-<!-- TODO: [x] remove s-sub-menu -->
-<!-- TODO: [x] use <full-height-page> in <list-view> -->
-<!-- TODO: [x] refactor project list -->
-<!-- TODO: [x] refactor design list -->
-<!-- TODO: [ ] how to handle scope selection in designs? -->
-<!-- TODO: [ ] main drawer: isActive based on route path start instead of default -->
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
@@ -43,10 +43,10 @@
         <span class="license-text">{{ licenseText }}</span>
       </div>
       <v-list class="pt-0 menu-drawer-body">
-        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" />
-        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" />
-        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" />
-        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" />
+        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" :active="route.path.startsWith('/projects')" />
+        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" :active="route.path.startsWith('/templates')" />
+        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" :active="route.path.startsWith('/designs')" />
+        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" :active="route.path.startsWith('/notes')" />
 
         <template v-if="auth.permissions.superuser || auth.permissions.user_manager || auth.permissions.view_license">
           <v-list-item class="mt-6 pa-0" min-height="0">
@@ -74,7 +74,13 @@
             </template>
           </v-list-item>
 
-          <v-list-item to="/users/" title="Users" prepend-icon="mdi-account-multiple" :disabled="!auth.permissions.user_manager" />
+          <v-list-item 
+            to="/users/" 
+            title="Users" 
+            prepend-icon="mdi-account-multiple" 
+            :active="route.path.startsWith('/users') && !route.path.startsWith('/users/self')"
+            :disabled="!auth.permissions.user_manager" 
+          />
           <license-info-menu-item />
         </template>
       </v-list>