highlight drawer item based on route

Author: danielkellyio

package-lock.json

@@ -37,9 +37,11 @@
     "@progress/kendo-vue-form": "^3.4.0",
     "@progress/kendo-vue-indicators": "^3.4.0",
     "@progress/kendo-vue-inputs": "^3.4.0",
+    "@progress/kendo-vue-intl": "^3.4.3",
     "@progress/kendo-vue-layout": "^3.4.0",
     "@progress/kendo-vue-notification": "^3.4.0",
     "@progress/kendo-vue-popup": "^3.4.0",
+    "@progress/kendo-vue-progressbars": "^3.4.3",
     "@rollup/plugin-graphql": "^1.1.0",
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/jsdom": "^16.2.14",

package.json

@@ -1,52 +1,58 @@
 <script setup lang="ts">
 import { Drawer, DrawerContent } from "@progress/kendo-vue-layout";
 import { useLocalStorage } from "@vueuse/core";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import { computed, ref } from "vue";
 
 const router = useRouter();
+const route = useRoute();
 const selectedId = ref(0);
 
 const expanded = useLocalStorage("vue-forge-drawer-expanded", true);
 const expandedIcon = computed(() =>
   expanded.value ? "k-i-arrow-chevron-left" : "k-i-arrow-chevron-right"
 );
-const items = computed(() => [
-  {
-    text: "Boards",
-    icon: "k-i-set-column-position",
-    selected: true,
-    data: {
-      path: "/",
+const items = computed(() =>
+  [
+    {
+      text: "Boards",
+      icon: "k-i-set-column-position",
+      data: {
+        path: "/boards",
+      },
     },
-  },
-  {
-    text: "Templates",
-    icon: "k-i-border-left",
-    data: {
-      path: "/templates",
+    {
+      text: "Templates",
+      icon: "k-i-border-left",
+      data: {
+        path: "/templates",
+      },
     },
-  },
-  {
-    text: "Settings",
-    icon: "k-i-gear",
-    data: {
-      path: "/settings",
+    {
+      text: "Settings",
+      icon: "k-i-gear",
+      data: {
+        path: "/settings",
+      },
     },
-  },
-  {
-    text: "Collapse",
-    icon: expandedIcon.value,
-    data: {
-      action: () => (expanded.value = !expanded.value),
+    {
+      text: "Collapse",
+      icon: expandedIcon.value,
+      data: {
+        action: () => (expanded.value = !expanded.value),
+      },
     },
-  },
-]);
+  ].map((item, index) => ({
+    ...item,
+    selected: route.path === item.data.path,
+  }))
+);
 
 function onSelect({ itemIndex }: { itemIndex: number }) {
   const item = items.value[itemIndex];
   if (!item) return;
+  selectedId.value = itemIndex;
   if (item.data.path) router.push(item.data.path);
   if (typeof item.data.action === "function") item.data.action();
 }