From b6d97bae2718caf71ef8c65c1d373f8a701fee16 Mon Sep 17 00:00:00 2001
From: Wil Wade <wil.wade@projectliberty.io>
Date: Fri, 15 Nov 2024 13:21:59 -0500
Subject: [PATCH] Button active state is special for header (#60)

# Problem

- The button should always hover black text
- The active state on the header should be navy
---
 src/lib/atoms/Button.svelte            | 2 +-
 src/lib/features/Header.stories.svelte | 4 ++--
 src/lib/features/NavMenu.svelte        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/atoms/Button.svelte b/src/lib/atoms/Button.svelte
index e6bdfd7..b6db652 100644
--- a/src/lib/atoms/Button.svelte
+++ b/src/lib/atoms/Button.svelte
@@ -29,7 +29,7 @@
   // Define button type classes
   $: typeClass =
     type === 'primary'
-      ? 'bg-teal text-black hover:bg-tealDark hover:shadow-md'
+      ? 'bg-teal text-black hover:text-black hover:bg-tealDark hover:shadow-md'
       : 'bg-transparent border text-white border-white hover:border-primary hover:text-primary';
 
   // Define classes
diff --git a/src/lib/features/Header.stories.svelte b/src/lib/features/Header.stories.svelte
index 536982d..cffcefa 100644
--- a/src/lib/features/Header.stories.svelte
+++ b/src/lib/features/Header.stories.svelte
@@ -17,10 +17,10 @@
 
 <!--Primary-->
 <Story name="Primary" id="primary">
-  <Header {menuItems} class="fixed left-0 top-0" innerClass="px-4" />
+  <Header {menuItems} class="fixed left-0 top-0 w-full" innerClass="px-4" />
 </Story>
 
 <!--Logo Link-->
 <Story name="LogoLink">
-  <Header {menuItems} class="fixed left-0 top-0" innerClass="px-4" logoLink="/" />
+  <Header {menuItems} class="fixed left-0 top-0 w-full" innerClass="px-4" logoLink="/" />
 </Story>
diff --git a/src/lib/features/NavMenu.svelte b/src/lib/features/NavMenu.svelte
index 81a8f13..61a7e82 100644
--- a/src/lib/features/NavMenu.svelte
+++ b/src/lib/features/NavMenu.svelte
@@ -50,7 +50,7 @@
       <div class="content-center">
         <Button
           size="auto"
-          class="text-navy"
+          class={item.isActive ? 'text-teal' : 'text-navy'}
           active={item.isActive || false}
           href={item.href}
           target={item.isExternal ? '_blank' : '_self'}