fix: links rendering in sidebar profile (#10574)

This pull request includes several changes to the `DropdownItem.vue` and `SidebarProfileMenu.vue` components to improve the handling of links.

Earlier we passed the link `/super_admin` to RouterLink directly, which would trigger validations internally and the dropdown item would not render in case of any errors. This PR fixes this by handling the native links appropriately

Fixes #10571

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownItem.vue

@@ -6,7 +6,8 @@ import { useDropdownContext } from './provider.js';
 const props = defineProps({
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
-  link: { type: String, default: '' },
+  link: { type: [String, Object], default: '' },
+  nativeLink: { type: Boolean, default: false },
   click: { type: Function, default: null },
   preserveOpen: { type: Boolean, default: false },
 });
@@ -18,7 +19,13 @@ defineOptions({
 const { closeMenu } = useDropdownContext();
 
 const componentIs = computed(() => {
-  if (props.link) return 'router-link';
+  if (props.link) {
+    if (props.nativeLink && typeof props.link === 'string') {
+      return 'a';
+    }
+
+    return 'router-link';
+  }
   if (props.click) return 'button';
 
   return 'div';
@@ -41,7 +48,8 @@ const triggerClick = () => {
       :class="{
         'hover:bg-n-alpha-2 rounded-lg w-full gap-3': !$slots.default,
       }"
-      :href="props.link || null"
+      :href="componentIs === 'a' ? props.link : null"
+      :to="componentIs === 'router-link' ? props.link : null"
       @click="triggerClick"
     >
       <slot>