From 227a3fbc28c2eebf7ed1a58d2c24905f6d3d4ccc Mon Sep 17 00:00:00 2001
From: MiniDigger <admin@benndorf.dev>
Date: Tue, 29 Mar 2022 17:08:12 +0200
Subject: [PATCH] make dropdown item links middle clickable

---
 .../src/components/design/DropdownItem.vue     | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend-new/src/components/design/DropdownItem.vue b/frontend-new/src/components/design/DropdownItem.vue
index 49bfb032..8c932db7 100644
--- a/frontend-new/src/components/design/DropdownItem.vue
+++ b/frontend-new/src/components/design/DropdownItem.vue
@@ -27,6 +27,21 @@ const type = computed(() => {
     return "p";
   }
 });
+
+// we can't pass href as undefined, else links aren't middle clickable, so we gotta use this computed...
+const attrs = computed(() => {
+  if (props.to) {
+    return {
+      to: props.to,
+    };
+  } else if (props.href) {
+    return {
+      href: props.href,
+    };
+  } else {
+    return {};
+  }
+});
 </script>
 
 <template>
@@ -37,8 +52,7 @@ const type = computed(() => {
         'px-4 py-2 font-semibold hover:(bg-background-light-10 dark:bg-background-dark-90) ' +
         (disabled ? 'cursor-not-allowed text-opacity-50' : 'cursor-pointer')
       "
-      :href="href"
-      :to="to"
+      v-bind="attrs"
     >
       <slot></slot>
     </component>