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>

src/lib/config.ts

@@ -9,6 +9,10 @@ export interface SectionConfig extends BrandConfig {
 	subtitle?: string;
 }
 
+export interface LinkConfig extends SectionConfig {
+	url: string;
+}
+
 export interface ServiceConfig extends SectionConfig {
 	url: string;
 	target?: string;
@@ -28,10 +32,13 @@ export type ColorConfig = Record<string, string>;
 export interface Config extends SectionConfig {
 	services: Array<ServiceGroupConfig>;
 
+	columns: number;
 	colors: {
 		light: ColorConfig;
 		dark: ColorConfig;
 	};
 
+	links: Array<LinkConfig>;
+
 	[x: string]: unknown;
 }

src/lib/server/config.ts

@@ -1,7 +1,13 @@
 import configData from '../../config.yml';
 import { readFile, watch } from 'fs/promises';
 import * as yml from 'js-yaml';
-import type { ColorConfig, Config, ServiceConfig, ServiceGroupConfig } from '$lib/config';
+import type {
+	ColorConfig,
+	Config,
+	LinkConfig,
+	ServiceConfig,
+	ServiceGroupConfig
+} from '$lib/config';
 
 const requiredService: Required<ServiceConfig> = {
 	title: '',
@@ -23,16 +29,27 @@ const requiredServiceGroup: Required<ServiceGroupConfig> = {
 	items: [requiredService]
 };
 
+const requiredLink: Required<LinkConfig> = {
+	title: '',
+	subtitle: '',
+	logo: '',
+	icon: '',
+	asmask: false,
+	url: ''
+};
+
 export const requiredConfig: Required<Config> = {
 	title: '',
 	subtitle: '',
 	logo: '',
 	icon: '',
 	asmask: false,
+	columns: 3,
 	colors: {
 		light: {},
 		dark: {}
 	},
+	links: [requiredLink],
 	services: [requiredServiceGroup]
 };
 
@@ -95,6 +112,7 @@ defaultDarkConfig['background-image'] = '';
 
 export const defaultConfig: Config = {
 	title: 'Flanders',
+	columns: 3,
 	colors: {
 		light: defaultLightConfig,
 		dark: defaultDarkConfig

src/lib/stores/layout.ts

@@ -0,0 +1,6 @@
+import { persistentWritable } from '$lib/persistentStore';
+import type { Writable } from 'svelte/store';
+
+export type LayoutDirection = 'column' | 'row';
+
+export const layoutDirection: Writable<LayoutDirection> = persistentWritable('layout', 'column');

src/lib/stores/themeVariant.ts

@@ -1,4 +1,4 @@
-import { persistentWritable } from './persistentStore';
+import { persistentWritable } from '$lib/persistentStore';
 
 export type ThemeVariant = 'default' | 'dark' | 'light';