responsive menu

src/lib/components/Header.svelte

@@ -1,42 +1,40 @@
 <script lang="ts">
 	import type { LinkConfig, SectionConfig } from '$lib/config';
 	import Brand from './Brand.svelte';
+	import Button from './Button.svelte';
 	import LayoutButton from './LayoutButton.svelte';
+	import LinkMenu from './LinkMenu.svelte';
 	import ThemeVariantButton from './ThemeVariantButton.svelte';
 
 	export let section: SectionConfig;
 	export let links: Array<LinkConfig>;
+
+	links = [];
+	let show = false;
 </script>
 
 <header class="flex flex-col justify-between gap-8">
 	<section class="flex h-16 flex-row items-center gap-4">
-		<div class="h-16 w-16">
+		<div class="h-12 w-12">
 			<a href="/">
 				<Brand brand={section} color="var(--logo-color)" />
 			</a>
 		</div>
 		<div>
 			{#if section.subtitle}
-				<h2 class="text-xl">{section.subtitle}</h2>
+				<h2 class="text-lg">{section.subtitle}</h2>
 			{/if}
-			<h1 class="text-4xl">{section.title}</h1>
+			<h1 class="text-3xl">{section.title}</h1>
 		</div>
 	</section>
-	<nav class="navbar flex flex-row justify-between" aria-label="main navigation">
-		<div class="justfiy-start flex flex-row gap-4">
-			{#each links as link}
-				<a class="justify-self-start" href={link.url}>
-					{#if link.icon}
-						<i class={link.icon} />
-					{/if}
-					<span class="link-label">{link.title}</span>
-				</a>
-			{/each}
-		</div>
-		<div class="flex flex-row items-center justify-start gap-4">
-			<ThemeVariantButton class="" />
+	<nav class="navbar relative flex flex-row justify-between text-lg" aria-label="main navigation">
+		{#if links.length > 0}
+			<LinkMenu {links} />
+		{/if}
+		<div class="flex flex-row items-center gap-1 justify-self-end">
+			<ThemeVariantButton />
 
-			<LayoutButton class="" />
+			<LayoutButton />
 			<div class="">
 				<div class="">
 					<input

src/lib/components/LayoutButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { layoutDirection } from '$lib/stores/layout';
+	import Button from './Button.svelte';
 
 	function toggle() {
 		if ($layoutDirection == 'column') {
@@ -10,10 +11,10 @@
 	}
 </script>
 
-<a on:click={toggle} class={$$restProps.class || ''}>
+<Button on:click={toggle} class={$$restProps.class || ''}>
 	{#if $layoutDirection == 'column'}
 		<i class="fa fa-table-columns" />
 	{:else}
 		<i class="fa fa-list-ul" />
 	{/if}
-</a>
+</Button>

src/lib/components/ServiceCard.svelte

@@ -43,8 +43,8 @@
 			<Brand brand={brand()} />
 		</div>
 		<div class="h-12">
-			<p class="text-xl">{service.title}</p>
-			<p class="text-md min-h-12 text-neutral-700 dark:text-neutral-500">
+			<p class="text-lg">{service.title}</p>
+			<p class="min-h-12 text-neutral-700 dark:text-neutral-500">
 				{subtitle()}
 			</p>
 		</div>

src/lib/components/ServiceGroup.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <div>
-	<div class="mb-6 text-2xl">
+	<div class="mb-6 text-xl">
 		<h3>
 			{#if group.icon}
 				<i class={group.icon} />

src/lib/components/ThemeVariantButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { themeVariant, type ThemeVariant } from '$lib/stores/themeVariant';
+	import Button from './Button.svelte';
 
 	const variants: Array<ThemeVariant> = ['default', 'dark', 'light'];
 
@@ -9,7 +10,7 @@
 	}
 </script>
 
-<a on:click={next} class={$$restProps.class || ''}>
+<Button on:click={next} class={$$restProps.class || ''}>
 	{#if $themeVariant == 'default'}
 		<i class="fa fa-circle-half-stroke" />
 	{:else if $themeVariant == 'light'}
@@ -17,4 +18,4 @@
 	{:else if $themeVariant == 'dark'}
 		<i class="fa-solid fa-circle" />
 	{/if}
-</a>
+</Button>