Add header links

frontend/src/lib/components/Header.svelte

@@ -1,7 +1,78 @@
 <script lang="ts">
+	import { link, location } from "svelte-spa-router";
+
+	type Link = {
+		label: string;
+		href: string;
+		base: string;
+	};
+	let sublinks: Link[] = [
+		{
+			label: "Daily",
+			href: "/daily",
+			base: "/daily",
+		},
+		{
+			label: "Weekly",
+			href: "/weekly",
+			base: "/weekly",
+		},
+		{
+			label: "Monthly",
+			href: "/monthly",
+			base: "/monthly",
+		},
+		{
+			label: "Yearly",
+			href: "/yearly",
+			base: "/yearly",
+		},
+	];
+
+	let selected = "Energy";
+	$: {
+		sublinks = sublinks.map((sublink: Link) => {
+			return {
+				...sublink,
+				href: `/${selected}${sublink.base}`,
+			};
+		});
+	}
 </script>
 
-<header	class="flex h-22 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
-   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-   a cheeky lil header
+<header
+	class="flex h-22 items-center justify-center bg-base-100 shadow-lg sticky top-0 z-50 border-b
+   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+>
+	<div>
+		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+			<a
+				use:link
+				class={"/" == $location
+					? "transition-colors hover:text-foreground/80"
+					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				href="/"
+				on:click={(e) => (selected = "Energy")}>Energy</a
+			>
+			<a
+				use:link
+				class={"/Weight" == $location
+					? "transition-colors hover:text-foreground/80"
+					: "transition-colors hover:text-foreground/80 text-foreground/60"}
+				href="/Weight"
+				on:click={(e) => (selected = "Weight")}>Weight</a
+			>
+		</nav>
+		<nav class="flex space-x-4 text-2xl font-bold select-none justify-center">
+			{#each sublinks as { label, href }}
+				<a
+					use:link
+					{href}
+					class={href == $location
+						? "transition-colors hover:text-foreground/80"
+						: "transition-colors hover:text-foreground/80 text-foreground/60"}>{label}</a
+				>
+			{/each}
+		</nav>
+	</div>
 </header>