From a8b9eaed8b971a578fcdba38758a5a09b1f69b8b Mon Sep 17 00:00:00 2001
From: nullptr <62841684+not-nullptr@users.noreply.github.com>
Date: Wed, 13 Nov 2024 23:10:47 +0000
Subject: [PATCH] feat: dynamic theme icon (#12)

---
 .../components/functional/FancyMenu.svelte    | 23 +++++-
 src/routes/+layout.svelte                     | 80 ++++++++++++++++++-
 2 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/functional/FancyMenu.svelte b/src/lib/components/functional/FancyMenu.svelte
index 77ef111..e46e618 100644
--- a/src/lib/components/functional/FancyMenu.svelte
+++ b/src/lib/components/functional/FancyMenu.svelte
@@ -4,6 +4,9 @@
 	import { duration } from "$lib/animation";
 	import { quintOut } from "svelte/easing";
 	import type { Writable } from "svelte/store";
+	import clsx from "clsx";
+	import { browser } from "$app/environment";
+	import { onMount, tick } from "svelte";
 
 	interface Props {
 		links: {
@@ -16,16 +19,25 @@
 
 	let { links, shouldGoBack = null }: Props = $props();
 
+	let hasLoaded = $state(false);
+
 	let navWidth = $state(1);
 	let linkCount = $derived(links.length);
 	let activeLinkIndex = $derived(
 		links.findIndex((i) => i.activeMatch($page.url.pathname)),
 	);
+
+	onMount(async () => {
+		await tick();
+		setTimeout(() => {
+			hasLoaded = true;
+		}, 16);
+	});
 </script>
 
 <div
 	bind:clientWidth={navWidth}
-	class="w-full flex bg-background relative h-16"
+	class="w-full flex bg-background relative h-16 items-center"
 >
 	{#if activeLinkIndex !== -1}
 		<div
@@ -33,12 +45,17 @@
 			style="width: {navWidth / linkCount - 8}px; left: {(navWidth /
 				linkCount) *
 				activeLinkIndex +
-				4}px; transition: {duration - 200}ms ease left;"
+				4}px; transition: {hasLoaded ? duration - 200 : 0}ms ease left;"
 		></div>
 	{/if}
 	{#each links as { name, url } (url)}
 		<a
-			class="w-1/2 px-2 h-[calc(100%-16px)] mt-2 flex items-center justify-center rounded-xl relative overflow-hidden font-medium"
+			class={clsx(
+				"w-1/2 px-2 ml-1 h-[calc(100%-8px)] mr-1 flex items-center justify-center rounded-xl relative overflow-hidden font-medium",
+				{
+					"bg-foreground": $page.url.pathname === url && !browser,
+				},
+			)}
 			href={url}
 			onclick={() => {
 				if (shouldGoBack) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 869aaa7..8bdfe30 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
 	import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
 	import { writable } from "svelte/store";
-	import { SunIcon } from "lucide-svelte";
+	import { MoonIcon, SunIcon } from "lucide-svelte";
 	import { browser } from "$app/environment";
 	import { setCookie } from "typescript-cookie";
 	let { children, data } = $props();
@@ -112,8 +112,82 @@
 
 		<FancyMenu {links} {shouldGoBack} />
 		<div class="h-16 px-4 flex items-center">
-			<button onclick={theme.toggle}>
-				<SunIcon />
+			<button onclick={theme.toggle} class="grid-cols-1 grid-rows-1 grid">
+				<!-- {#if theme.dark}
+					<div
+						class="w-full h-full flex items-center justify-center row-start-1 col-start-1"
+					>
+						<MoonIcon />
+					</div>
+				{:else}
+					<div
+						class="w-full h-full flex items-center justify-center row-start-1 col-start-1"
+					>
+						<SunIcon />
+					</div>
+				{/if} -->
+				{#if browser}
+					{#if theme.dark}
+						<div
+							in:blur={{
+								blurMultiplier: 1,
+								duration,
+								easing: quintOut,
+								scale: {
+									start: 0.5,
+									end: 1,
+								},
+							}}
+							out:blur={{
+								blurMultiplier: 1,
+								duration,
+								easing: quintOut,
+								scale: {
+									start: 1,
+									end: 1.5,
+								},
+							}}
+							class="w-full h-full flex items-center justify-center row-start-1 col-start-1"
+						>
+							<MoonIcon class="w-8" />
+						</div>
+					{:else}
+						<div
+							in:blur={{
+								blurMultiplier: 1,
+								duration,
+								easing: quintOut,
+								scale: {
+									start: 0.5,
+									end: 1,
+								},
+							}}
+							out:blur={{
+								blurMultiplier: 1,
+								duration,
+								easing: quintOut,
+								scale: {
+									start: 1,
+									end: 1.5,
+								},
+							}}
+							class="w-full h-full flex items-center justify-center row-start-1 col-start-1"
+						>
+							<SunIcon class="w-8" />
+						</div>
+					{/if}
+				{:else}
+					<div
+						class="w-full h-full flex items-center justify-center row-start-1 col-start-1 dynadark:hidden"
+					>
+						<SunIcon class="w-8" />
+					</div>
+					<div
+						class="w-full h-full hidden items-center justify-center row-start-1 col-start-1 dynadark:flex"
+					>
+						<MoonIcon class="w-8" />
+					</div>
+				{/if}
 			</button>
 		</div>
 	</div>