djfhgsdjhghjsdf

src/hooks.server.js

@@ -25,7 +25,7 @@ export async function handle({ event, resolve }) {
 		};
 	}
 
-	if (!PUBLIC_RESOURCES.includes(event.route.id) && !user) return redirect(303, '/');
+	if (event.route.id.includes('(app)') && !user) return redirect(303, '/');
 
 	return await resolve(event);
 }

src/lib/components/Dropdown.svelte

@@ -0,0 +1,22 @@
+<script>
+	import { slide } from 'svelte/transition';
+	import { Menu } from 'lucide-svelte';
+
+	let visible = false;
+
+	function toggle() {
+		visible = !visible;
+	}
+</script>
+
+<div class="relative w-fit text-sm">
+	<button class="w-min" on:click={toggle}><Menu></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"
+		>
+			<slot />
+		</button>
+	{/if}
+</div>

src/lib/components/DropdownButton.svelte

@@ -0,0 +1,3 @@
+<div class="px-3 py-1.5 flex space-x-1 hover:bg-neutral-600 transition-all">
+	<slot />
+</div>

src/lib/components/Footer.svelte

@@ -0,0 +1,4 @@
+<div
+	class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
+    bg-neutral-200 dark:bg-neutral-900 transition-colors"
+></div>

src/lib/components/Header.svelte

@@ -0,0 +1,35 @@
+<script>
+	import { user } 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 { Cog, LogOut } from 'lucide-svelte';
+</script>
+
+<div
+	class="w-full h-full py-auto flex px-4 place-content-between rounded-xl
+    bg-neutral-200 dark:bg-neutral-900 transition-colors"
+>
+	<div class="my-auto flex space-x-4">
+		<p class="my-auto text-xl hover:scale-105 focus:scale-105 active:scale-95 transition-all">
+			File Uploader
+		</p>
+		<div class="flex space-x-2 my-auto">
+			<HeaderLink href="/dashboard">Dashboard</HeaderLink>
+		</div>
+	</div>
+	<div class="my-auto flex space-x-2">
+		<Dropdown>
+			<DropdownButton>
+				<p class="my-auto">Uploads</p>
+			</DropdownButton>
+			<DropdownButton>
+				<p class="my-auto">Settings</p>
+			</DropdownButton>
+			<DropdownButton>
+				<p class="my-auto text-red-500">Logout</p>
+			</DropdownButton>
+		</Dropdown>
+	</div>
+</div>

src/lib/components/HeaderLink.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { page } from '$app/stores';
+
+	export let href;
+	let selected = false;
+
+	page.subscribe((pg) => {
+		selected = pg.url.pathname === href;
+	});
+</script>
+
+<a
+	{href}
+	class="my-auto md:text-lg transition-all {selected
+		? 'font-bold tracking-wider'
+		: 'hover:text-neutral-500 focus:text-neutral-500'}"
+>
+	<slot />
+</a>

src/lib/components/Inputs/Link.svelte

@@ -10,7 +10,8 @@
 {:else if style === 'button'}
 	<a
 		{href}
-		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400 hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
+		class="flex p-2 space-x-2 rounded-lg border-b-2 transition-colors border-neutral-400
+	       hover:border-neutral-500 hover:dark:border-neutral-500 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-900"
 	>
 		<slot />
 	</a>

src/routes/(app)/+layout.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Header from '$lib/components/Header.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+</script>
+
+<div class="w-full min-h-screen">
+	<div class="w-full h-12">
+		<Header></Header>
+	</div>
+
+	<div class="w-full min-h-[calc(100vh-4rem)] my-2">
+		<slot />
+	</div>
+
+	<div class="w-full h-20">
+		<Footer></Footer>
+	</div>
+</div>