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) =>
+      v-for="[title, routes] of filteredMenuRoutes"
-        a[0].localeCompare(b[0])
+      :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>

src/views/HomeView.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="container mx-auto p-4">
+    <input
+      type="text"
+      v-model="searchQuery"
+      placeholder="Search.."
+      class="mb-4 border w-full"
+    />
+
     <div
       class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-5"
     >
       <div
-        v-for="(category, categoryName) in tools"
+        v-for="(category, categoryName) in filteredTools"
         :key="categoryName"
-        class="bg-white rounded-lg shadow-md p-4"
+        class="bg-white shadow-md p-4"
+        v-show="Object.keys(category).length > 0"
       >
         <h2 class="text-xl font-semibold mb-3">{{ categoryName }}</h2>
         <div class="max-h-80 overflow-y-auto">
@@ -31,7 +39,7 @@
     <div class="flex flex-wrap justify-center items-center gap-4 max-w-4xl">
       <a
         href="https://gist.stuzer.link/stuzer05/liked"
-        class="flex items-center w-64 p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 transition-colors duration-300"
+        class="flex items-center w-64 p-4 bg-white shadow-md hover:bg-gray-50 transition-colors duration-300"
       >
         <img
           src="https://gist.stuzer.link/assets/opengist-85b89b9c.svg"
@@ -43,7 +51,7 @@
 
       <a
         href="https://pdf.stuzer.link/"
-        class="flex items-center w-64 p-4 bg-white rounded-lg shadow-md hover:bg-gray-50 transition-colors duration-300"
+        class="flex items-center w-64 p-4 bg-white shadow-md hover:bg-gray-50 transition-colors duration-300"
       >
         <img
           src="https://pdf.stuzer.link/favicon.svg"
@@ -59,11 +67,13 @@
 <script>
 import { useToolsStore } from "@/stores/toolsStore";
 import { useRouter } from "vue-router";
+import { computed, ref } from 'vue';
 
 export default {
   data() {
     return {
       tools: {},
+      searchQuery: ref(''),
     };
   },
   setup() {
@@ -78,6 +88,25 @@ export default {
   mounted() {
     this.tools = useToolsStore().tools;
   },
+  computed: {
+    filteredTools() {
+      const query = this.searchQuery.toLowerCase();
+      if (query) {
+        return Object.fromEntries(
+          Object.entries(this.tools).map(([categoryName, tools]) => [
+            categoryName,
+            Object.fromEntries(
+              Object.entries(tools).filter(
+                ([_, toolName]) => toolName.toLowerCase().includes(query)
+              )
+            ),
+          ])
+        );
+      } else {
+        return this.tools;
+      }
+    },
+  },
 };
 </script>