feat: share feedback link

src/lib/components/sidebar/Menu.svelte

@@ -1,14 +1,30 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import Banner from "$lib/assets/banner.webp";
 
   export let href: string;
+  export let colorful: boolean = false;
   export let target: string = '_self';
 
   $: active_class = $page.url.pathname === href ? 'bg-neutral-900 !border-neutral-800' : '';
 </script>
 
 <li>
-  <a href={href} {target} class="transition-all duration-200 w-full flex items-center justify-start text-neutral-200 rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent {active_class}">
-    <slot />
-  </a>
+  {#if colorful}
+    <a
+      href={href}
+      {target}
+      class="transition-all duration-200 w-full flex items-center justify-start text-white font-bold rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent relative z-[1] overflow-hidden"
+    >
+      <div
+        class="absolute top-0 left-0 w-full h-full bg-black brightness-75 rounded-xl z-[-1] transition-all duration-200 bg-cover hover:brightness-100"
+        style="background-image: url({Banner}); background-position: 0% 0%;"
+      />
+      <slot />
+    </a>
+  {:else}
+    <a href={href} {target} class="transition-all duration-200 w-full flex items-center justify-start text-neutral-200 rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent {active_class}">
+      <slot />
+    </a>
+  {/if}
 </li>

src/lib/components/sidebar/Sidebar.svelte

@@ -69,7 +69,7 @@
           <Icon icon="ph:question-fill" class="w-5 h-5" />
           Help
         </Menu>
-        <Menu href="https://huggingface.co/spaces/enzostvs/loras-studio/discussions/1" target="_blank">
+        <Menu href="https://huggingface.co/spaces/enzostvs/loras-studio/discussions/1" target="_blank" colorful={true}>
           <Icon icon="ooui:feedback-ltr" class="w-5 h-5" />
           Feedback
         </Menu>