Refactor siteMainHeader component and update navigation links

edwardspresume · Apr 15, 2024 · c9e973b · c9e973b
1 parent e166248
commit c9e973b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/src/lib/components/siteMainHeader/SiteMainHeader.svelte b/src/lib/components/siteMainHeader/SiteMainHeader.svelte
@@ -1,20 +1,24 @@
-<script>
-	import { route } from '$lib/ROUTES';
+<script lang="ts">
+	import type { NavLinks } from '$lib/utils/navLinks';
 
-	import FeedbackForm from '$components/form/FeedbackForm.svelte';
 	import Button from '$components/ui/button/button.svelte';
 	import SiteMainNav from './SiteMainNav.svelte';
 	import SiteMainNavMenuToggleBtn from './SiteMainNavMenuToggleBtn.svelte';
 	import ThemeToggler from './ThemeToggler.svelte';
+
+	export let heading: string;
+	export let headingHref: string;
+	export let navLinks: NavLinks;
 </script>
 
-<header class="relative mb-10 border-b">
+<header class="relative mb-10 border-b border-accent-foreground/10">
 	<div class="container flex items-center justify-between p-2">
-		<Button href={route('/')} variant="link" class="p-0 text-2xl font-bold">Logo</Button>
+		<Button href={headingHref} variant="link" class="p-0 text-2xl font-bold">
+			{heading}
+		</Button>
 
 		<div class="flex gap-2">
-			<SiteMainNav />
-			<FeedbackForm />
+			<SiteMainNav {navLinks} />
 			<ThemeToggler />
 			<SiteMainNavMenuToggleBtn />
 		</div>

diff --git a/src/lib/components/siteMainHeader/SiteMainNav.svelte b/src/lib/components/siteMainHeader/SiteMainNav.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
 	import { writable } from 'svelte/store';
 
-	export const MAIN_NAV_ID: string = 'main_nav';
+	export const MAIN_NAV_ID: string = 'main_navigation_id';
 
 	export const isSiteNavMenuOpen = writable(false);
 </script>
@@ -10,20 +10,21 @@
 	import { page } from '$app/stores';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	import { mainNavLinks } from '$lib/utils/navLinks';
+	import type { NavLinks } from '$lib/utils/navLinks';
 	import { cn } from '$lib/utils/styleTransitionUtils';
 
 	import Button from '$components/ui/button/button.svelte';
 
 	let className: HTMLAttributes<HTMLElement>['class'] = undefined;
 	export { className as class };
+	export let navLinks: NavLinks;
 
-	// computed property for dynamic classes
+	// Computes classes based on the navigation menu state
 	$: dynamicClasses = {
 		'-translate-x-full': !$isSiteNavMenuOpen
 	};
 
-	// static classes
+	// Defines static classes for the navigation component
 	const staticClasses =
 		'absolute left-0 z-50 w-full px-4 pt-10 transition-transform duration-300 top-full h-svh sm:h-full sm:relative sm:w-fit sm:-translate-x-0 sm:p-0 bg-secondary sm:bg-transparent';
 </script>
@@ -34,7 +35,7 @@
 	class={cn(staticClasses, dynamicClasses, className)}
 >
 	<ul class="grid gap-5 *:*:w-full sm:flex sm:gap-2">
-		{#each Object.values(mainNavLinks) as link}
+		{#each Object.values(navLinks) as link}
 			{@const isCurrentPage = $page.url.pathname === link.href ? 'page' : undefined}
 
 			<li>
@@ -43,7 +44,7 @@
 					variant="outline"
 					aria-label={link.ariaLabel}
 					aria-current={isCurrentPage}
-					class={isCurrentPage ? '' : 'text-muted-foreground'}
+					class={isCurrentPage ? 'font-semibold text-primary' : 'text-muted-foreground'}
 				>
 					{link.title}
 				</Button>

diff --git a/src/lib/utils/navLinks.ts b/src/lib/utils/navLinks.ts
@@ -9,6 +9,10 @@ export type NavLink = {
 	isExternal?: boolean;
 };
 
+export type NavLinks = {
+	[key: string]: NavLink;
+};
+
 export const createNavLink = ({ title, href, ariaLabel, isExternal }: NavLink) => {
 	if (!title || !href) {
 		throw new Error('Title and href are required to create a NavLink');
@@ -18,7 +22,7 @@ export const createNavLink = ({ title, href, ariaLabel, isExternal }: NavLink) =
 		title,
 		href,
 		ariaLabel: ariaLabel ?? title,
-		isExternal
+		isExternal: isExternal ?? false
 	};
 };
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -16,6 +16,9 @@
 	import extend from 'just-extend';
 	import { MetaTags } from 'svelte-meta-tags';
 
+	import { route } from '$lib/ROUTES';
+	import { mainNavLinks } from '$lib/utils/navLinks';
+
 	import '../app.pcss';
 
 	import SiteMainHeader from '$components/siteMainHeader/SiteMainHeader.svelte';
@@ -42,7 +45,7 @@
 <ModeWatcher />
 
 <div class="flex flex-col h-svh">
-	<SiteMainHeader />
+	<SiteMainHeader heading="Logo" headingHref={route('/')} navLinks={mainNavLinks} />
 
 	<main class="container flex-1 p-2 pb-10">
 		<slot />