Add search

src/components/Sidebar.vue

@@ -2,32 +2,42 @@
   <header class="flex justify-between mx-2 mt-1">
     <span class="font-bold">Tools</span>
     <router-link :to="{ name: 'home' }" class="ml-4" tag="button"
-      >Home</router-link
+    >Home</router-link
     >
   </header>
 
   <hr class="mt-2 mb-2" />
 
+  <div class="mx-2">
+    <input
+      type="text"
+      v-model="searchQuery"
+      placeholder="Search.."
+      class="mb-4 border w-full"
+    />
+  </div>
+
   <nav class="flex flex-col ml-2">
     <div
-      v-for="[title, routes] of Object.entries(menuRoutes).sort((a, b) =>
-        a[0].localeCompare(b[0])
-      )"
+      v-for="[title, routes] of filteredMenuRoutes"
+      :key="title"
       class="flex flex-col mb-2"
+      v-show="Object.keys(routes).length > 0"
     >
       <p>
         <i>{{ title }}</i>
       </p>
       <router-link
         v-for="[key, value] of Object.entries(routes)"
+        :key="key"
         :to="{ name: key }"
         class="ml-4"
         tag="button"
-        >{{ value }}</router-link
+      >{{ value }}</router-link
       >
     </div>
 
-    <hr class="mt-3 mb-3" />
+    <hr class="mt-3 mb-3" v-show="filteredMenuRoutes.length > 0" />
 
     <div class="flex flex-col mb-2">
       <p><i>Other</i></p>
@@ -35,10 +45,10 @@
         href="https://gist.stuzer.link/stuzer05/liked"
         class="ml-4"
         tag="button"
-        >Gist</a
+      >Gist</a
       >
       <a href="https://pdf.stuzer.link/" class="ml-4" tag="button"
-        >PDF tools</a
+      >PDF tools</a
       >
     </div>
   </nav>
@@ -46,17 +56,37 @@
 
 <script>
 import { useToolsStore } from "@/stores/toolsStore";
+import { ref, computed } from 'vue';
 
 export default {
   name: "Sidebar",
   components: {},
-  data() {
+  setup() {
+    const toolsStore = useToolsStore();
+    const searchQuery = ref('');
+
+    const filteredMenuRoutes = computed(() => {
+      const query = searchQuery.value.toLowerCase();
+      if (query) {
+        return Object.entries(toolsStore.tools)
+          .map(([categoryName, routes]) => [
+            categoryName,
+            Object.fromEntries(
+              Object.entries(routes).filter(
+                ([_, routeName]) => routeName.toLowerCase().includes(query)
+              )
+            ),
+          ])
+          .filter(([categoryName, routes]) => Object.keys(routes).length > 0);
+      } else {
+        return Object.entries(toolsStore.tools);
+      }
+    });
+
     return {
-      menuRoutes: {},
+      searchQuery,
+      filteredMenuRoutes,
     };
   },
-  mounted() {
-    this.menuRoutes = useToolsStore().tools;
-  },
 };
-</script>
+</script>