Merge pull request #56 from mongoosejs/IslandRhythms/maintain-highlight

maintain highlight in navbar
mongoosejs · Feb 27, 2025 · 680c1cd · 680c1cd
2 parents 83c4540 + 7bc9a00
commit 680c1cd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/frontend/src/navbar/navbar.html b/frontend/src/navbar/navbar.html
@@ -12,11 +12,11 @@
       <a
         href="#/"
         class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
-        :class="routeName === 'root' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
+        :class="documentView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Documents</a>
       <a
         href="#/dashboards"
         class="inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium"
-        :class="routeName === 'dashboards' ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
+        :class="dashboardView ? 'text-gray-900 border-ultramarine-500' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'">Dashboards</a>
 
       <div class="h-full flex items-center" v-if="!user && hasAPIKey">
         <button

diff --git a/frontend/src/navbar/navbar.js b/frontend/src/navbar/navbar.js
@@ -3,6 +3,7 @@
 const api = require('../api');
 const mothership = require('../mothership');
 const template = require('./navbar.html');
+const routes = require('../routes');
 
 const appendCSS = require('../appendCSS');
 
@@ -14,6 +15,12 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   computed: {
+    dashboardView() {
+      return routes.filter(x => x.name.startsWith('dashboard')).map(x => x.name).includes(this.$route.name)
+    },
+    documentView() {
+      return ['root', 'model', 'document'].includes(this.$route.name);
+    },
     routeName() {
       return this.$route.name;
     },