From dfbb6a6d9c1893883deedca96ffb75703632dbd8 Mon Sep 17 00:00:00 2001
From: cirroskais <cirroskais@madhouselabs.net>
Date: Thu, 25 Apr 2024 00:39:04 -0400
Subject: [PATCH] dshgfdshjagd

---
 src/app.css                              |  7 +++++
 src/hooks.server.js                      |  6 ++--
 src/lib/components/Dropdown.svelte       |  8 +++--
 src/lib/components/DropdownButton.svelte |  5 ++-
 src/lib/components/Header.svelte         | 40 +++++++++++++++++++-----
 src/lib/components/Inputs/Button.svelte  |  8 +----
 src/routes/(app)/+layout.svelte          |  2 +-
 src/routes/(app)/admin/+page.svelte      |  0
 src/routes/(app)/dashboard/+page.svelte  |  1 +
 src/routes/+error.svelte                 |  2 --
 10 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 src/routes/(app)/admin/+page.svelte

diff --git a/src/app.css b/src/app.css
index eb02d79..5afbab4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200..1000&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,6 +8,11 @@ html {
 	@apply dark:bg-neutral-950;
 	@apply dark:text-neutral-200;
 	@apply transition-colors;
+
+	font-family: 'Nunito', sans-serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
 }
 
 strong {
diff --git a/src/hooks.server.js b/src/hooks.server.js
index 9aa8b08..6d712fe 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -1,4 +1,4 @@
-import { redirect } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import { getSession } from '$lib/server/database';
 import { COOKIE } from '$lib/config';
 
@@ -25,7 +25,9 @@ export async function handle({ event, resolve }) {
 		};
 	}
 
-	if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
+	if (event.route.id) {
+		if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
+	}
 
 	return await resolve(event);
 }
diff --git a/src/lib/components/Dropdown.svelte b/src/lib/components/Dropdown.svelte
index d5af63a..742b9f0 100644
--- a/src/lib/components/Dropdown.svelte
+++ b/src/lib/components/Dropdown.svelte
@@ -9,12 +9,14 @@
 	}
 </script>
 
-<div class="relative w-fit text-sm">
-	<button class="w-min" on:click={toggle}><Menu></Menu></button>
+<div class="flex relative w-fit">
+	<button class="my-auto w-min" on:click={toggle}>
+		<Menu class="w-5 h-5"></Menu>
+	</button>
 	{#if visible}
 		<button
 			transition:slide
-			class="w-52 z-10 h-fit translate-y-12 py-2 bg-neutral-900 rounded-lg origin-top right-0 absolute"
+			class="w-[12rem] z-10 h-fit translate-y-12 py-2 bg-neutral-200 dark:bg-neutral-900 rounded-lg origin-top right-0 absolute transition-all"
 		>
 			<slot />
 		</button>
diff --git a/src/lib/components/DropdownButton.svelte b/src/lib/components/DropdownButton.svelte
index 41d340c..c5cb810 100644
--- a/src/lib/components/DropdownButton.svelte
+++ b/src/lib/components/DropdownButton.svelte
@@ -2,6 +2,9 @@
 	export let href = '';
 </script>
 
-<a {href} class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-600">
+<a
+	{href}
+	class="flex px-3 py-1.5 space-x-1 transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
+>
 	<slot />
 </a>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 837045c..2c06651 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,24 +1,50 @@
 <script>
+	import { Sun, Moon } from 'lucide-svelte';
+
+	import { user, darkMode } from '$lib/stores';
+
 	import HeaderLink from '$lib/components/HeaderLink.svelte';
 	import Dropdown from '$lib/components/Dropdown.svelte';
 	import DropdownButton from '$lib/components/DropdownButton.svelte';
+	import Logo from '$lib/components/Logo.svelte';
 </script>
 
 <div
-	class="flex place-content-between px-4 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
+	class="flex place-content-between px-4 my-2 w-full h-full rounded-xl transition-colors py-auto bg-neutral-200 dark:bg-neutral-900"
 >
-	<div class="flex my-auto space-x-4">
-		<p class="my-auto text-xl transition-all hover:scale-105 focus:scale-105 active:scale-95">
-			File Uploader
-		</p>
-		<div class="flex my-auto space-x-2">
+	<div class="flex my-auto space-x-6">
+		<a
+			href="/dashboard"
+			class="flex-none my-auto w-20 text-xl transition-all fill-black dark:fill-white hover:scale-105 focus:scale-105 active:scale-95"
+		>
+			<Logo></Logo>
+		</a>
+		<div class="flex my-auto space-x-3">
 			<HeaderLink href="/dashboard">Dashboard</HeaderLink>
+			<HeaderLink href="/uploads">Uploads</HeaderLink>
+			<HeaderLink href="/admin">Admin</HeaderLink>
 		</div>
 	</div>
 	<div class="flex my-auto space-x-2">
+		<p class="font-bold">{$user?.username}</p>
 		<Dropdown>
+			<div>
+				<button
+					class="flex px-3 py-1.5 space-x-1.5 w-full transition-all hover:bg-neutral-300 hover:dark:bg-neutral-800"
+					on:click={() => {
+						$darkMode = !$darkMode;
+					}}
+				>
+					{#if $darkMode}
+						<Sun class="my-auto w-5 h-5" />
+					{:else}
+						<Moon class="my-auto w-5 h-5" />
+					{/if}
+					<p>Theme</p>
+				</button>
+			</div>
 			<DropdownButton>
-				<p class="my-auto">Uploads</p>
+				<p class="my-auto">ShareX Profile</p>
 			</DropdownButton>
 			<DropdownButton>
 				<p class="my-auto">Settings</p>
diff --git a/src/lib/components/Inputs/Button.svelte b/src/lib/components/Inputs/Button.svelte
index e8568aa..0c04d33 100644
--- a/src/lib/components/Inputs/Button.svelte
+++ b/src/lib/components/Inputs/Button.svelte
@@ -11,13 +11,7 @@
 	{disabled}
 >
 	<div
-		class="flex space-x-2 rounded-lg border-b-2 p-2 transition-colors
-        
-        border-neutral-400 bg-neutral-200
-        hover:border-neutral-500 hover:group-disabled/button:border-neutral-400
-
-        dark:border-neutral-700 dark:bg-neutral-900
-        hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
+		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 bg-neutral-200 hover:border-neutral-500 hover:group-disabled/button:border-neutral-400 dark:border-neutral-700 dark:bg-neutral-900 hover:dark:border-neutral-500 hover:group-disabled/button:dark:border-neutral-700"
 	>
 		<slot />
 	</div>
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 1c93c54..9b8686e 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -8,7 +8,7 @@
 		<Header></Header>
 	</div>
 
-	<div class="w-full min-h-[calc(100vh-4rem)] my-2">
+	<div class="w-full min-h-[calc(100vh-4.5rem)] my-2">
 		<slot />
 	</div>
 
diff --git a/src/routes/(app)/admin/+page.svelte b/src/routes/(app)/admin/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/(app)/dashboard/+page.svelte b/src/routes/(app)/dashboard/+page.svelte
index e9c85ab..e244efc 100644
--- a/src/routes/(app)/dashboard/+page.svelte
+++ b/src/routes/(app)/dashboard/+page.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { user } from '$lib/stores';
+	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
 
 	export let data;
 
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d847af6..0f4d32a 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -16,11 +16,9 @@
 		</div>
 		<div class="flex space-x-2">
 			<Button click={goBack}>
-				<Undo />
 				<p>Go Back</p>
 			</Button>
 			<Link style="button" href="/">
-				<Home />
 				<p>Go Home</p>
 			</Link>
 		</div>