refactor: created components for navlinks in sidebar

frontend/src/components/AppSidebar.vue

@@ -5,30 +5,21 @@
     </div>
     <div class="flex-1">
       <nav class="space-y-0.5 px-2">
-        <div v-for="link in navigations" :key="link.name">
+        <NavLinks
-          <router-link
+          :links="navigations"
-            custom
+          class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
-            :to="link.route"
+          active="bg-gray-100 hover:bg-gray-200"
-            v-slot="{ href, isActive, navigate }"
+          inactive="hover:bg-gray-50"
-          >
+        >
-            <a
+          <template v-slot="{ link }">
-              :href="href"
+            <div class="flex w-full items-center space-x-2">
-              @click="navigate"
+              <span class="grid h-5 w-6 place-items-center">
-              class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
+                <component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
-              :class="[isActive ? 'bg-gray-100 hover:bg-gray-200' : 'hover:bg-gray-50']"
+              </span>
-            >
+              <span class="text-base">{{ link.name }}</span>
-              <div class="flex w-full items-center space-x-2">
+            </div>
-                <span class="grid h-5 w-6 place-items-center">
+          </template>
-                  <component
+        </NavLinks>
-                    :is="link.icon"
-                    class="h-4.5 w-4.5 text-gray-700"
-                  />
-                </span>
-                <span class="text-base">{{ link.name }}</span>
-              </div>
-            </a>
-          </router-link>
-        </div>
       </nav>
     </div>
   </div>
@@ -39,6 +30,7 @@ import LeadsIcon from './Icons/LeadsIcon.vue'
 import DealsIcon from './Icons/DealsIcon.vue'
 import InboxIcon from './Icons/InboxIcon.vue'
 import DashboardIcon from './Icons/DashboardIcon.vue'
+import NavLinks from './NavLinks.vue'
 
 const navigations = [
   {

frontend/src/components/NavLink.vue

@@ -0,0 +1,16 @@
+<template>
+  <router-link custom :to="link.route" v-slot="{ href, isActive, navigate }">
+    <a
+      :href="href"
+      @click="navigate"
+      :class="[isActive ? active : inactive, $attrs.class]"
+    >
+      <slot :link="link">
+        {{ link.name }}
+      </slot>
+    </a>
+  </router-link>
+</template>
+<script setup>
+const props = defineProps(['link', 'active', 'inactive'])
+</script>

frontend/src/components/NavLinks.vue

@@ -0,0 +1,17 @@
+<template>
+  <NavLink
+    v-for="link in links"
+    :key="link.name"
+    :class="$attrs.class"
+    v-bind="{ link, active, inactive }"
+  >
+    <slot :link="link">
+      {{ link.name }}
+    </slot>
+  </NavLink>
+</template>
+<script setup>
+import NavLink from './NavLink.vue'
+
+const props = defineProps(['links', 'active', 'inactive'])
+</script>