header tweaks (#57)

# Problem Update styling for header # Solution - updated styling for header Co-authored-by: Claire Olmstead <olmsteadclaire@gmail.com>
frequency-chain · Nov 15, 2024 · 3b4c815 · 3b4c815
1 parent a3a8768
commit 3b4c815
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/src/lib/features/Header.stories.svelte b/src/lib/features/Header.stories.svelte
@@ -16,6 +16,11 @@
 <Meta title="UI Components/Features/Header" component={Header} />
 
 <!--Primary-->
-<Story name="Header" id="header">
+<Story name="Primary" id="primary">
   <Header {menuItems} class="fixed left-0 top-0 w-full" />
 </Story>
+
+<!--Logo Link-->
+<Story name="LogoLink">
+  <Header {menuItems} class="fixed left-0 top-0 w-full" logoLink="/" />
+</Story>
diff --git a/src/lib/features/Header.svelte b/src/lib/features/Header.svelte
@@ -4,16 +4,17 @@
   import NavMenuMobile from './NavMenuMobile.svelte';
   import { MenuItem } from '$lib/utils/types.js';
 
+  export let logoLink = '';
   export let menuItems: MenuItem[] = [];
   export let highlightMarginTop = '90px';
 </script>
 
 <div class={`header-shadow flex h-[85px] font-title ${$$restProps.class}`}>
-  <div class="m-auto flex h-[85px] w-full max-w-screen-lg items-stretch justify-around sm:px-f20 md:px-f32">
+  <div class="m-auto flex h-[85px] w-full max-w-screen-xl justify-between sm:px-f20 md:px-f32">
     <!-- For Desktop -->
-    <div class="flex w-[146px] items-center text-teal md:w-[200px]">
-      <FrequencyLogo />
-    </div>
+    <a href={logoLink} class={`self-center ${logoLink ? '' : 'pointer-events-none'}`}>
+      <FrequencyLogo class="w-[146px] text-teal md:w-[200px]" />
+    </a>
 
     <NavMenu {highlightMarginTop} {menuItems} />
     <!-- For Mobile -->

diff --git a/src/lib/features/NavMenu.svelte b/src/lib/features/NavMenu.svelte
@@ -44,7 +44,7 @@
   });
 </script>
 
-<nav class="hidden items-stretch gap-f40 md:flex">
+<nav class="hidden gap-f32 text-navy md:flex">
   {#each menuItems as item}
     {#if item.isButton}
       <div class="content-center">