From 74e10a44dae600e8e43ed1bc2bae72a2ee02d183 Mon Sep 17 00:00:00 2001
From: Alexandre Tuleu <alexandre.tuleu.2005@polytechnique.org>
Date: Fri, 22 Sep 2023 07:18:19 +0200
Subject: [PATCH] responsive menu

---
 src/lib/components/Header.svelte             | 32 +++++++++-----------
 src/lib/components/LayoutButton.svelte       |  5 +--
 src/lib/components/ServiceCard.svelte        |  4 +--
 src/lib/components/ServiceGroup.svelte       |  2 +-
 src/lib/components/ThemeVariantButton.svelte |  5 +--
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 7158dfb..f5ef656 100644
--- a/src/lib/components/Header.svelte
+++ b/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
diff --git a/src/lib/components/LayoutButton.svelte b/src/lib/components/LayoutButton.svelte
index 5fef59a..3274e9f 100644
--- a/src/lib/components/LayoutButton.svelte
+++ b/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>
diff --git a/src/lib/components/ServiceCard.svelte b/src/lib/components/ServiceCard.svelte
index b41357a..5a84d19 100644
--- a/src/lib/components/ServiceCard.svelte
+++ b/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>
diff --git a/src/lib/components/ServiceGroup.svelte b/src/lib/components/ServiceGroup.svelte
index 1419bc6..4fa9756 100644
--- a/src/lib/components/ServiceGroup.svelte
+++ b/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} />
diff --git a/src/lib/components/ThemeVariantButton.svelte b/src/lib/components/ThemeVariantButton.svelte
index 024f2e5..0aef0b7 100644
--- a/src/lib/components/ThemeVariantButton.svelte
+++ b/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>