From 99f972ca450c80dd03d95e3107864e063181fc96 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Tue, 16 Apr 2024 09:24:14 +0200
Subject: [PATCH] feat: add button color transition (#105)

---
 .../components/atoms/buttons/button.svelte    |  2 +-
 src/lib/components/organisms/menu/menu.svelte | 21 ++-----------------
 2 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/atoms/buttons/button.svelte b/src/lib/components/atoms/buttons/button.svelte
index 993730f..78b07b8 100644
--- a/src/lib/components/atoms/buttons/button.svelte
+++ b/src/lib/components/atoms/buttons/button.svelte
@@ -59,7 +59,7 @@
 <svelte:element
     this={href ? 'a' : 'button'}
     role={href ? 'link' : 'button'}
-    class="whitespace-pre-line {textClasses} {colorClasses} {iconClasses} {FONT_FAMILY_CLASS.primary}"
+    class="whitespace-pre-line transition-colors {textClasses} {colorClasses} {iconClasses} {FONT_FAMILY_CLASS.primary}"
     {disabled}
     href={href || null}
     target={href && isExternal ? '_blank' : null}
diff --git a/src/lib/components/organisms/menu/menu.svelte b/src/lib/components/organisms/menu/menu.svelte
index bf80509..7859b9f 100644
--- a/src/lib/components/organisms/menu/menu.svelte
+++ b/src/lib/components/organisms/menu/menu.svelte
@@ -25,10 +25,6 @@
      */
     export let isMobileMenuOpen: boolean = false
 
-    function getActiveIndexSetter(index: number): () => void {
-        return () => (activeIndex = index)
-    }
-
     function toggleMobileMenu(): void {
         isMobileMenuOpen = !isMobileMenuOpen
     }
@@ -52,13 +48,7 @@
         </a>
         <desktop-menu-items class="hidden md:flex flex-row items-center space-x-4">
             {#each menuItems as menuItem, index}
-                {@const handleOnClick = getActiveIndexSetter(index)}
-                <MenuItem
-                    {...menuItem}
-                    {darkmode}
-                    isActive={activeIndex === index}
-                    on:click={handleOnClick}
-                />
+                <MenuItem {...menuItem} {darkmode} isActive={activeIndex === index} />
             {/each}
         </desktop-menu-items>
         <button
@@ -76,14 +66,7 @@
     >
         <menu-items class="flex flex-col items-start justify-start space-y-8 py-[60px] px-6">
             {#each menuItems as menuItem, index}
-                {@const handleOnClick = getActiveIndexSetter(index)}
-                <MenuItem
-                    {...menuItem}
-                    {darkmode}
-                    isActive={activeIndex === index}
-                    on:click={handleOnClick}
-                    mobile
-                />
+                <MenuItem {...menuItem} {darkmode} isActive={activeIndex === index} mobile />
             {/each}
         </menu-items>
     </aside>