Reworked Navbar to use shadcn

src/lib/components/NavigationElement.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	let {href} = $props()
-	// {$page.url.pathname === '/'}
-</script>
-
-<li>
-	<a {href}><slot /></a>
-</li>

src/routes/+layout.svelte

@@ -38,15 +38,9 @@
 
 </script>
 
-<div class="
+<div class="h-full" >
-	bg-{themes[$UserSettingsStore.themeId].backgroundColor}
-	text-{themes[$UserSettingsStore.themeId].textColor}
-	h-full" >
 	<Header/>
 	<slot />
-	<!-- (sidebarLeft) -->
-	<!-- (sidebarRight) -->
-	<!-- <svelte:fragment slot="pageHeader">Page Header</svelte:fragment> -->
 	<!-- Router Slot -->
 	<!-- ---- / ---- -->
 	<!-- (pageFooter) -->

src/routes/+page.svelte

@@ -2,7 +2,12 @@
 <script lang="ts">
 </script>
 
-<div class="container h-full mx-auto flex flex-col justify-center items-center">
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Landing Page for the Chellaris Multiplayer Group" />
+</svelte:head>
+
+<div class="container py-2 h-full mx-auto flex flex-col justify-center items-center">
 	<h1>Chellaris</h1>
 	<div class="space-y-5">
 		<ul>

src/routes/Header.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import discord from '$lib/images/discord.svg';
-	import Settings from './Settings.svelte';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-	import Button from '$lib/components/Button.svelte';
+	import { Button } from '$lib/components/ui/button';
-	import NavigationElement from '$lib/components/NavigationElement.svelte';
 	import { themes } from '$lib/types/themes';
 	import UserSettingsStore from '$lib/stores/UserSettingsStore';
-
+	import * as Avatar from '$lib/components/ui/avatar';
-	let showSettings = false;
+	import { Exit } from 'radix-icons-svelte';
-
+	import { Separator } from '$lib/components/ui/separator';
-	const openSettings = () => {
-		// open the settings I guess
-	}
 
 	let user = {
 		loggedIn: true, // DEBUG
 		admin: true, // DEBUG
 	}
 
+	function login() {
+		user.loggedIn = true;
+	}
+
+	function logout() {
+		user.loggedIn = false;
+	}
+
 	function nextTheme() {
 		if ($UserSettingsStore.themeId + 1 < themes.length) {
 			$UserSettingsStore.themeId += 1
@@ -29,45 +33,95 @@
 	
 </script>
 
-<div class="flex gap-2 flex-row">
+<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
 	<!-- spacer -->
-	<ul class="flex gap-2 flex-row">
+		<Button
-		<NavigationElement href="/">Home</NavigationElement>
+			variant="ghost"
-		<NavigationElement href="/current">Game [Current Game]</NavigationElement>
+			href="/"
-		<NavigationElement href="/archive">Archives</NavigationElement>
+			class="{$page.url.pathname == '/' ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Home
+		</Button>
+		<Button
+			variant="ghost"
+			href="/current"
+			class="{$page.url.pathname == '/current' ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Game [Current Game]
+		</Button>
+		<Button
+			variant="ghost"
+			href="/archive"
+			class="{$page.url.pathname.startsWith('/archive') ? 'text-accent-foreground bg-accent' : ''}"
+		>
+			Archives
+		</Button>
 		{#if user.loggedIn && user.admin}
-			<NavigationElement href="/admin"></NavigationElement>
+			<Button
+				variant="ghost"
+				href="/admin"
+				class="{$page.url.pathname == '/admin' ? 'text-accent-foreground bg-accent' : ''}"
+			>
+				Admin
+			</Button>
 		{/if}
 		<div class="dropdown" href="user.loggedIn ? /account | /login"></div>
-		<Button onclick={nextTheme}>Theme</Button>
-		<NavigationElement href="/settings">Settings</NavigationElement>
 		{#if user.loggedIn}
-			<NavigationElement href="/account">Account</NavigationElement>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger asChild let:builder>
+					<Button
+						variant="ghost"
+						builders={[builder]}
+						class="relative h-8 w-8 rounded-full"
+					>
+						<Avatar.Root class="h-8 w-8">
+							<Avatar.Image src="/avatar.png" alt="@user" />
+							<Avatar.Fallback>US</Avatar.Fallback>
+						</Avatar.Root>
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="w-56">
+					<DropdownMenu.Label class="font-normal">
+						<div class="flex flex-col space-y-1 items-start">
+							<p class="text-sm font-medium leading-none">User Display</p>
+							<p class="text-xs leading-none text-muted-foreground">@User</p>
+						</div>
+					</DropdownMenu.Label>
+					<DropdownMenu.Separator />
+					<DropdownMenu.Group>
+						<DropdownMenu.Item href="/profile">
+							Profile
+						</DropdownMenu.Item>
+						<DropdownMenu.Item href="/settings">
+							Settings
+						</DropdownMenu.Item>
+					</DropdownMenu.Group>
+					<DropdownMenu.Separator />
+					<DropdownMenu.Item class="flex flex-row space-x-1" on:click={logout}>
+						<p>Log out </p>
+						<Exit />
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
 		{:else}
-			<NavigationElement href="/login">Login</NavigationElement>
+			<Button
+				variant="ghost"
+				class="relative"
+			>
+				Log in
+			</Button>
 		{/if}
-	</ul>
+	<Button
-	<!-- spacer -->
+		variant="link"
-		<!--padding="px-4 py-2"
+		href="https://discord.gg/invite/BYNeHaPNh9"
-		justify="justify-center"
+		target="_blank"
-		rounded="rounded-tr-xl rounded-tl-xl"
+		rel="noopener noreferrer"
-		border="border-b-2 border-primary-500"
+		class="h-8 w-8 items-center flex"
-		active="variant-glass-primary hover:variant-ghost-primary"
+	>
-		<div aria-current={$page.url.pathname.startsWith('/sign-up') ? 'page' : undefined}>
+		<Avatar.Root class="h-6 w-6">
-		<a href="/sign-up">Empire Sign-Up</a>
+			<Avatar.Image src={discord} alt="DC" />
-	</div>-->
+			<Avatar.Fallback>US</Avatar.Fallback>
-		<!--padding="px-4 py-2"
+		</Avatar.Root>
-		justify="justify-center"
+	</Button>
-		rounded="rounded-tr-xl rounded-tl-xl"
-		border="border-b-2 border-primary-500"
-		active="variant-glass-primary hover:variant-ghost-primary"
-		hover="hover:variant-ghost-primary"-->
-
-		<div class="lightswitch" />
-		<div>
-			<!-- Logo -->
-			<a class="lg:!ml-0 w-[32px] lg:w-auto overflow-hidden" href="https://discord.gg/invite/BYNeHaPNh9" target="_blank" rel="noopener noreferrer">
-				<img width="32px" height="32px" src={discord} alt="Discord" />
-			</a>
-		</div>
 </div>
+<Separator orientation="horizontal"></Separator>