Makes the navbar and layout clicks

src/lib/components/Brand.svelte

@@ -2,7 +2,6 @@
 	import type { BrandConfig } from '$lib/config';
 
 	export let brand: BrandConfig = {};
-	export let size = 48;
 	export let color = 'var(--text)';
 	console.log(brand);
 
@@ -11,11 +10,7 @@
 	}
 </script>
 
-<div
-	class="container"
-	style="--size: {size}px; --mask: url({brand.logo || ''}); --mask-color: {color}"
-	class:masked={masked()}
->
+<div style="--mask: url({brand.logo || ''}); --mask-color: {color}" class:masked={masked()}>
 	{#if brand.logo}
 		{#if brand.asmask != true}
 			<img src={brand.logo} alt="logo" />
@@ -26,25 +21,21 @@
 </div>
 
 <style>
-	.container {
-		width: var(--size);
-		min-width: min-content;
-		height: var(--size);
+	div {
+		width: 100%;
+		height: 100%;
 		color: var(--mask-color);
 	}
 
+	img {
+		width: 100%;
+	}
+
 	.masked {
 		background: var(--mask-color);
 		mask: var(--mask) center no-repeat;
-		mask-size: var(--size);
+		mask-size: 100%;
 		-webkit-mask: var(--mask) center no-repeat;
-		-webkit-mask-size: var(--size);
-	}
-
-	div {
-		display: flex;
-		flex-flow: row wrap;
-		align-items: center;
-		justify-content: center;
+		-webkit-mask-size: 100%;
 	}
 </style>

src/lib/components/Header.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { LinkConfig, SectionConfig } from '$lib/config';
+	import Brand from './Brand.svelte';
+	import LayoutButton from './LayoutButton.svelte';
+	import ThemeVariantButton from './ThemeVariantButton.svelte';
+
+	export let section: SectionConfig;
+	export let links: Array<LinkConfig>;
+</script>
+
+<header>
+	<section class="first-line">
+		<div class="container">
+			<div class="logo">
+				<a href="/">
+					<Brand brand={section} color="var(--text-header)" />
+				</a>
+			</div>
+			<div class="dashboard-title">
+				{#if section.subtitle}
+					<h2>{section.subtitle}</h2>
+				{/if}
+				<h1>{section.title}</h1>
+			</div>
+		</div>
+	</section>
+	<nav class="navbar" aria-label="main navigation">
+		<div class="container">
+			<div class="navbar-start">
+				{#each links as link}
+					<a class="navbar-item" href={link.url}>
+						{#if link.icon}
+							<i class={link.icon} />
+						{/if}
+						<span class="link-label">{link.title}</span>
+					</a>
+				{/each}
+			</div>
+			<div class="navbar-end">
+				<ThemeVariantButton class="navbar-item" />
+
+				<LayoutButton class="navbar-item" />
+				<div class="navbar-item">
+					<div class="control has-icons-left">
+						<input class="input" type="text" placeholder="Filter" />
+						<span class="icon is-small is-left">
+							<i class="fa fa-search" />
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</nav>
+</header>

src/lib/components/LayoutButton.svelte

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

src/lib/components/ServiceCard.svelte

@@ -8,7 +8,9 @@
 	const component = getServiceComponent(service.type || '');
 </script>
 
-<p>{service.title}</p>
-{#if component != undefined}
-	<svelte:component this={component} {data} />
-{/if}
+<div class="service-card">
+	<p>{service.title}</p>
+	{#if component != undefined}
+		<svelte:component this={component} {data} />
+	{/if}
+</div>

src/lib/components/ServiceGroup.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 	import type { ServiceGroupConfig } from '$lib/config';
+	import { layoutDirection } from '$lib/stores/layout';
 	import ServiceCard from './ServiceCard.svelte';
 
 	export let group: ServiceGroupConfig;
 	export let groupData: Array<unknown>;
 </script>
 
-{#each group.items as service, i}
-	<ServiceCard {service} data={groupData[i]} />
-{/each}
+<div class="service-group layout-{$layoutDirection}">
+	{#each group.items as service, i}
+		<ServiceCard {service} data={groupData[i]} />
+	{/each}
+</div>

src/lib/components/ThemeVariantButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { themeVariant, type ThemeVariant } from '$lib/themeVariant';
+	import { themeVariant, type ThemeVariant } from '$lib/stores/themeVariant';
 
 	const variants: Array<ThemeVariant> = ['default', 'dark', 'light'];
 
@@ -9,14 +9,12 @@
 	}
 </script>
 
-<a on:click={next}>
-	<span class="icon">
-		{#if $themeVariant == 'default'}
-			<i class="fas fa-circle-half-stroke" />
-		{:else if $themeVariant == 'light'}
-			<i class="fa-regular fa-circle" />
-		{:else if $themeVariant == 'dark'}
-			<i class="fa-solid fa-circle" />
-		{/if}
-	</span>
+<a on:click={next} class={$$restProps.class || ''}>
+	{#if $themeVariant == 'default'}
+		<i class="fa fa-circle-half-stroke" />
+	{:else if $themeVariant == 'light'}
+		<i class="fa-regular fa-circle" />
+	{:else if $themeVariant == 'dark'}
+		<i class="fa-solid fa-circle" />
+	{/if}
 </a>