Fix Router Link highlighting in sidebar (#363)

EnAccess · Nov 19, 2024 · 17de2e7 · 17de2e7
1 parent 7844d01
commit 17de2e7
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 83 deletions.
diff --git a/src/frontend/src/ExportedRoutes.js b/src/frontend/src/ExportedRoutes.js
@@ -131,7 +131,7 @@ export const exportedRoutes = [
   },
   {
     path: "/",
-    component: ClusterOverviewPage,
+    redirect: "/clusters",
     name: "cluster-list-dashboard",
     meta: {
       layout: "default",
@@ -143,40 +143,7 @@ export const exportedRoutes = [
     },
   },
   {
-    path: "/clusters",
-    component: ChildRouteWrapper,
-    children: [
-      {
-        path: "",
-        component: ClusterOverviewPage,
-        name: "cluster-list",
-        meta: {
-          layout: "default",
-          breadcrumb: {
-            level: "base",
-            name: "Clusters",
-            link: "/clusters",
-          },
-        },
-      },
-      {
-        path: ":id",
-        component: ClusterDetailPage,
-        name: "cluster-detail",
-        meta: {
-          layout: "default",
-          breadcrumb: {
-            level: "detail",
-            name: "Clusters",
-            link: "/clusters",
-            target: "id",
-          },
-        },
-      },
-    ],
-  },
-  {
-    path: "/dashboards",
+    path: "",
     component: ChildRouteWrapper,
     meta: {
       sidebar: {
@@ -188,16 +155,45 @@ export const exportedRoutes = [
     children: [
       {
         path: "clusters",
-        redirect: "/",
+        component: ChildRouteWrapper,
         meta: {
           sidebar: {
             enabled: true,
             name: "Clusters",
           },
         },
+        children: [
+          {
+            path: "",
+            component: ClusterOverviewPage,
+            name: "cluster-list",
+            meta: {
+              layout: "default",
+              breadcrumb: {
+                level: "base",
+                name: "Clusters",
+                link: "/clusters",
+              },
+            },
+          },
+          {
+            path: ":id",
+            component: ClusterDetailPage,
+            name: "cluster-detail",
+            meta: {
+              layout: "default",
+              breadcrumb: {
+                level: "detail",
+                name: "Clusters",
+                link: "/clusters",
+                target: "id",
+              },
+            },
+          },
+        ],
       },
       {
-        path: "mini-grid",
+        path: "dashboards/mini-grid",
         component: ChildRouteWrapper,
         meta: {
           sidebar: {
@@ -390,7 +386,7 @@ export const exportedRoutes = [
     ],
   },
   {
-    path: "/tickets",
+    path: "",
     component: ChildRouteWrapper,
     meta: {
       sidebar: {
@@ -401,7 +397,7 @@ export const exportedRoutes = [
     },
     children: [
       {
-        path: "",
+        path: "tickets",
         component: TicketList,
         meta: {
           layout: "default",
@@ -412,14 +408,14 @@ export const exportedRoutes = [
         },
       },
       {
-        path: "settings/users",
+        path: "tickets-settings/users",
         component: TicketSettingsUsers,
         meta: {
           layout: "default",
         },
       },
       {
-        path: "settings/categories",
+        path: "tickets-settings/categories",
         component: TicketSettingsCategories,
         meta: {
           layout: "default",
@@ -470,7 +466,7 @@ export const exportedRoutes = [
     ],
   },
   {
-    path: "/meters",
+    path: "",
     component: ChildRouteWrapper,
     meta: {
       sidebar: {
@@ -481,18 +477,7 @@ export const exportedRoutes = [
     },
     children: [
       {
-        path: "types",
-        component: MeterTypeList,
-        meta: {
-          layout: "default",
-          sidebar: {
-            enabled: true,
-            name: "Types",
-          },
-        },
-      },
-      {
-        path: "",
+        path: "meters",
         component: ChildRouteWrapper,
         meta: {
           sidebar: {
@@ -528,6 +513,17 @@ export const exportedRoutes = [
           },
         ],
       },
+      {
+        path: "meters-types",
+        component: MeterTypeList,
+        meta: {
+          layout: "default",
+          sidebar: {
+            enabled: true,
+            name: "Types",
+          },
+        },
+      },
     ],
   },
   {
@@ -698,7 +694,7 @@ export const exportedRoutes = [
     },
   },
   {
-    path: "/agents",
+    path: "",
     component: ChildRouteWrapper,
     meta: {
       sidebar: {
@@ -709,49 +705,51 @@ export const exportedRoutes = [
     },
     children: [
       {
-        path: "",
-        component: AgentList,
+        path: "agents",
+        component: ChildRouteWrapper,
         meta: {
           layout: "default",
           sidebar: {
             enabled: true,
             name: "List",
           },
         },
+        children: [
+          {
+            path: "",
+            component: AgentList,
+            meta: {
+              layout: "default",
+            },
+          },
+          {
+            path: ":id",
+            component: AgentDetail,
+            meta: {
+              layout: "default",
+              breadcrumb: {
+                level: "base",
+                name: "Agents",
+                link: "/agents",
+                target: "id",
+              },
+            },
+          },
+        ],
       },
       {
-        path: "commission-types",
-        redirect: "/commissions",
+        path: "commissions",
+        component: AgentCommissionTypeList,
         meta: {
+          layout: "default",
           sidebar: {
             enabled: true,
             name: "Commission Types",
           },
         },
       },
-      {
-        path: ":id",
-        component: AgentDetail,
-        meta: {
-          layout: "default",
-          breadcrumb: {
-            level: "base",
-            name: "Agents",
-            link: "/agents",
-            target: "id",
-          },
-        },
-      },
     ],
   },
-  {
-    // FIXME: This should probably be part of agents menu and endpoint
-    path: "/commissions",
-    component: AgentCommissionTypeList,
-    meta: {
-      layout: "default",
-    },
-  },
   {
     // FIXME: Should this be part of the Customer route?
     path: "/sold-appliance-detail",

diff --git a/src/frontend/src/modules/Sidebar/SideBar.vue b/src/frontend/src/modules/Sidebar/SideBar.vue
@@ -28,7 +28,6 @@
             <router-link
               v-if="!hasSubMenu(menu)"
               :to="menu.path"
-              :exact-path="true"
               :key="'menu' + menu.path"
             >
               <md-list-item>
@@ -68,7 +67,6 @@
                     :key="sub.path"
                     :to="subMenuUrl(menu.path, sub.path)"
                     class="sub-menu"
-                    :exact-path="true"
                   >
                     <template
                       v-if="
@@ -247,7 +245,7 @@ export default {
   background-color: rgba(32, 66, 32, 0.74);
 }
 
-.exact-active {
+.active {
   background: #6b6a6a !important;
   position: relative;
   width: calc(100%) !important;