From 5d1ec12d95a8df79e7ca0049fed24708494d7e57 Mon Sep 17 00:00:00 2001
From: Christoph Urlacher <christoph.urlacher@protonmail.com>
Date: Fri, 13 Dec 2024 14:46:02 +0100
Subject: [PATCH] Lib: Allow to manually enable :hover on Button

---
 src/app.css                      |  7 +++++++
 src/lib/components/Button.svelte | 28 +++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app.css b/src/app.css
index b5c61c9..3a694cb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* This class allows to manually simulate the "hover" class */
+.btn-hover {
+  --tw-brightness: brightness(1.15);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
+    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 7faf5d6..925041d 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,22 +1,44 @@
 <script lang="ts">
+  import { page } from "$app/stores";
+
+  const is_at_path = (path: string): boolean => {
+    const pathname: string = $page.url.pathname;
+    // console.log(pathname);
+    return pathname === path;
+  };
+
   let {
     children,
-    color,
+    color = undefined,
     submit = false,
     href = undefined,
     fullwidth = false,
+    activate_href = false,
+    activate_button = false,
     ...restProps
   } = $props();
 </script>
 
 {#if href}
-  <a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
+  <a
+    {href}
+    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
+      ? 'w-full'
+      : 'w-auto'}
+    {activate_href && is_at_path(href) ? 'btn-hover' : ''}"
+    draggable="false"
+    {...restProps}
+  >
     {@render children()}
   </a>
 {:else}
   <button
     type={submit ? "submit" : "button"}
-    class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
+    class="select-none {color ? `btn px-2 variant-filled-${color}` : ''} {fullwidth
+      ? 'w-full'
+      : 'w-auto'}
+    {activate_button ? 'btn-hover' : ''}"
+    draggable="false"
     {...restProps}
   >
     {@render children()}