-
+
-
-
+
diff --git a/src/lib/components/siteMainHeader/SiteMainNav.svelte b/src/lib/components/siteMainHeader/SiteMainNav.svelte
index 53c635a..20c3c40 100644
--- a/src/lib/components/siteMainHeader/SiteMainNav.svelte
+++ b/src/lib/components/siteMainHeader/SiteMainNav.svelte
@@ -1,7 +1,7 @@
@@ -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
['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';
@@ -34,7 +35,7 @@
class={cn(staticClasses, dynamicClasses, className)}
>
- {#each Object.values(mainNavLinks) as link}
+ {#each Object.values(navLinks) as link}
{@const isCurrentPage = $page.url.pathname === link.href ? 'page' : undefined}
-
@@ -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}
diff --git a/src/lib/utils/navLinks.ts b/src/lib/utils/navLinks.ts
index 2c1923d..debdae8 100644
--- 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
index 7701b41..f0b0cc2 100644
--- 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 @@
-
+