feat: update user navigation and add logo component for improved branding

web/src/routes/dashboard/+layout.server.ts

@@ -1,6 +1,7 @@
 import {env} from '$env/dynamic/public';
 import type {LayoutServerLoad} from './$types';
 import {redirect} from '@sveltejs/kit';
+import {base} from "$app/paths";
 
 const apiUrl = env.PUBLIC_API_URL;
 
@@ -14,7 +15,7 @@ export const load: LayoutServerLoad = async ({fetch}) => {
 	});
 	if (!response.ok) {
 		console.log('unauthorized, redirecting to login');
-		throw redirect(303, '/login');
+		throw redirect(303, base + '/login');
 	}
 	return {user: await response.json()};
 };

web/src/routes/dashboard/+layout.svelte

@@ -4,11 +4,12 @@
 	import type {LayoutProps} from './$types';
 	import {setContext} from 'svelte';
 	import {goto} from '$app/navigation';
+	import {base} from "$app/paths";
 
 	let {data, children}: LayoutProps = $props();
 	console.log('Received User Data: ', data.user);
 	if (!data.user.is_verified) {
-		goto('/login/verify')
+		goto(base + '/login/verify')
 	}
 	setContext('user', () => data.user);
 </script>

web/src/routes/dashboard/+page.svelte

@@ -2,6 +2,7 @@
 	import {Separator} from '$lib/components/ui/separator/index.js';
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import {base} from "$app/paths";
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
@@ -11,7 +12,7 @@
 		<Breadcrumb.Root>
 			<Breadcrumb.List>
 				<Breadcrumb.Item class="hidden md:block">
-					<Breadcrumb.Link href="/dashboard">MediaManager</Breadcrumb.Link>
+					<Breadcrumb.Link href="{base}/dashboard">MediaManager</Breadcrumb.Link>
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>

web/src/routes/login/+page.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
     import LoginForm from '$lib/components/login-form.svelte';
+    import Logo from '$lib/components/logo-side-by-side.svelte';
 </script>
 
-<div class="flex h-screen w-full items-center justify-center px-4">
-    <LoginForm/>
-</div>
+<div class="flex h-screen w-full items-center justify-center px-4 pt-16">
+    <div class="flex flex-col items-center">
+        <!-- Ensure Logo doesn't inherit conflicting styles -->
+        <div class="mb-16 scale-150">
+            <Logo/>
+        </div>
+
+        <LoginForm/>
+    </div>
+</div>

web/src/routes/login/verify/+page.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
     import {UserCheck} from 'lucide-svelte';
     import {Button} from '$lib/components/ui/button/index.js';
+    import Logo from '$lib/components/logo-side-by-side.svelte';
+
 </script>
 
+
 <div class="flex min-h-screen flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+    <div class="absolute top-4 left-4">
+        <Logo/>
+    </div>
     <div class="mx-auto w-full max-w-md text-center">
-        <div class="mb-6">
+
+
+    <div class="mb-6">
             <UserCheck class="mx-auto h-16 w-16 text-primary"/>
         </div>
         <h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
@@ -24,45 +32,4 @@
         <p class="mt-10 text-sm text-muted-foreground end">
             If you have any questions, please contact an administrator.</p>
     </div>
-</div>
-
-
-<style>
-    /* Assuming you have Tailwind CSS with Shadcn Svelte theme variables configured */
-    /* Otherwise, you might need to define these colors or use your own classes */
-    .bg-background {
-        background-color: hsl(var(--background));
-    }
-
-    .text-primary {
-        color: hsl(var(--primary));
-    }
-
-    .text-foreground {
-        color: hsl(var(--foreground));
-    }
-
-    .text-muted-foreground {
-        color: hsl(var(--muted-foreground));
-    }
-
-    .bg-primary {
-        background-color: hsl(var(--primary));
-    }
-
-    .text-primary-foreground {
-        color: hsl(var(--primary-foreground));
-    }
-
-    .ring-ring {
-        --tw-ring-color: hsl(var(--ring));
-    }
-
-    .ring-offset-background {
-        --tw-ring-offset-color: hsl(var(--background));
-    }
-
-    .hover\:bg-primary\/90:hover {
-        background-color: hsl(var(--primary) / 0.9);
-    }
-</style>
+</div>