Uses tailwind

src/lib/components/Header.svelte

@@ -8,47 +8,53 @@
 	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>
+<header class="flex flex-col gap-4">
+	<section class="flex h-16 flex-row items-center gap-4">
+		<div class="h-16 w-16">
+			<a href="/">
+				<Brand brand={section} color="var(--logo-color)" />
+			</a>
+		</div>
+		<div>
+			{#if section.subtitle}
+				<h2 class="text-xl">{section.subtitle}</h2>
+			{/if}
+			<h1 class="text-4xl">{section.title}</h1>
 		</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" />
+	<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="" />
 
-				<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>
+			<LayoutButton class="" />
+			<div class="">
+				<div class="">
+					<input
+						class="w-40 rounded-xl border-2 border-neutral-400 bg-neutral-300 px-4 py-0 outline-0 transition-all focus:w-60 dark:border-neutral-800 dark:bg-neutral-700"
+						type="text"
+						placeholder="Filter"
+					/>
 				</div>
 			</div>
 		</div>
 	</nav>
 </header>
+
+<style lang="postcss">
+	:root {
+		--logo-color: theme(colors.neutral.800);
+	}
+	:global(.dark) {
+		--logo-color: theme(colors.neutral.400);
+	}
+</style>