feat(ui): finish Link component (for Sidebar)

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);