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

@@ -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

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>

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'}