From 10361af8f97501ece600e02d436b7667e129224f Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sat, 14 Dec 2024 10:38:09 +0100
Subject: [PATCH] feat(ui): finish Link component (for Sidebar)

---
 front/src/components/ui/Link.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index a316b1e00..c89888e50 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -19,8 +19,8 @@ const isExternalLink = computed(() => {
       <slot />
   </a>
   <RouterLink v-if="to && !isExternalLink" :to="to" :class="$style[colorClass]">
-     <slot />
-      <i v-if="icon" :class="['bi', icon]" />
+    <i v-if="icon" :class="['bi', icon]" />
+    <slot />
   </RouterLink>
 </template>
 
@@ -33,7 +33,7 @@ const isExternalLink = computed(() => {
     border: 1px solid var(--fw-bg-color);
 
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     white-space: nowrap;
 
@@ -51,6 +51,19 @@ const isExternalLink = computed(() => {
     transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
     transition: all .2s ease;
 
+    i {
+      margin-right:1ch;
+      font-size:1.4em;
+    }
+
+    &:not(:hover) {
+      text-decoration:none;
+      background-color:transparent;
+      border-color:transparent;
+    }
+
+    transition:background-color .3s, border-color .2s;
+
     @include light-theme {
       &.is-secondary.is-outline {
         --fw-bg-color: var(--fw-gray-600);