base structure

src/components/admin/RoutingLink.vue

@@ -1,35 +1,36 @@
 <template>
-  <RouterLink v-if="link" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
+  <RouterLink v-if="link" :to="link">
     <p
       class="cursor-pointer w-full px-2 py-3"
-      :class="
-        activeLink == link.key
-          ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
-          : 'pl-3 hover:bg-red-200 rounded-lg'
-      "
+      :class="active ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'"
     >
-      {{ link.title }}
+      {{ title }}
     </p>
   </RouterLink>
 </template>
 
 <script setup lang="ts">
+import { defineComponent, type PropType } from "vue";
+import { RouterLink } from "vue-router";
 import { mapState, mapActions } from "pinia";
 import { useNavigationStore, type navigationLinkModel } from "@/stores/admin/navigation";
 </script>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { RouterLink } from "vue-router";
 export default defineComponent({
   props: {
-    link: {
-      type: Object as PropType<navigationLinkModel>,
-      default: null,
+    title: {
+      type: String,
+      default: "LINK",
+    },
+    link: {
+      type: [String, Object as PropType<{ name: string }>],
+      default: "/",
+    },
+    active: {
+      type: Boolean,
+      default: false,
     },
-  },
-  computed: {
-    ...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
   },
 });
 </script>