From eff06c0da6f1560d6645e7c769770b804297dad2 Mon Sep 17 00:00:00 2001
From: Haelnorr <lockedonohoe@gmail.com>
Date: Fri, 14 Feb 2025 13:46:52 +1100
Subject: [PATCH] Added dropdown to profile button

---
 view/component/nav/navbarright.templ | 78 +++++++++++++++++++++++++---
 view/component/nav/sidenav.templ     | 41 ++++++++-------
 2 files changed, 94 insertions(+), 25 deletions(-)

diff --git a/view/component/nav/navbarright.templ b/view/component/nav/navbarright.templ
index 41110c7..1dbb11b 100644
--- a/view/component/nav/navbarright.templ
+++ b/view/component/nav/navbarright.templ
@@ -2,19 +2,83 @@ package nav
 
 import "projectreshoot/contexts"
 
+type ProfileItem struct {
+	name string // Label to display
+	href string // Link reference
+}
+
+// Return the list of profile links
+func getProfileItems() []ProfileItem {
+	return []ProfileItem{
+		{
+			name: "Profile",
+			href: "/profile",
+		},
+		{
+			name: "Account",
+			href: "/account",
+		},
+	}
+}
+
 // Returns the right portion of the navbar
 templ navRight() {
 	{{ user := contexts.GetUser(ctx) }}
+	{{ items := getProfileItems() }}
 	<div class="flex items-center gap-2">
 		<div class="sm:flex sm:gap-2">
 			if user != nil {
-				<a
-					class="hidden rounded-lg px-4 py-2 sm:block 
-                bg-sapphire hover:bg-sapphire/75 text-mantle transition"
-					href="#"
-				>
-					{ user.Username }
-				</a>
+				<div x-data="{ isActive: false }" class="relative">
+					<div
+						class="inline-flex items-center overflow-hidden
+                        rounded-lg bg-sapphire hover:bg-sapphire/75 transition"
+					>
+						<button
+							x-on:click="isActive = !isActive"
+							class="h-full py-2 px-4 text-mantle"
+						>
+							<span class="sr-only">Profile</span>
+							{ user.Username }
+						</button>
+					</div>
+					<div
+						class="absolute end-0 z-10 mt-2 w-36 divide-y 
+                        divide-surface2 rounded-lg border border-surface1 
+                        bg-surface0 shadow-lg"
+						role="menu"
+						x-cloak
+						x-transition
+						x-show="isActive"
+						x-on:click.away="isActive = false"
+						x-on:keydown.escape.window="isActive = false"
+					>
+						<div class="p-2">
+							for _, item := range items {
+								<a
+									href={ templ.SafeURL(item.href) }
+									class="block rounded-lg px-4 py-2 text-md 
+                                    hover:bg-crust"
+									role="menuitem"
+								>
+									{ item.name }
+								</a>
+							}
+						</div>
+						<div class="p-2">
+							<form hx-post="/logout">
+								<button
+									type="submit"
+									class="flex w-full items-center gap-2
+                                    rounded-lg px-4 py-2 text-md text-red 
+                                    hover:bg-red/25 hover:cursor-pointer"
+									role="menuitem"
+								>
+									Logout
+								</button>
+							</form>
+						</div>
+					</div>
+				</div>
 			} else {
 				<a
 					class="hidden rounded-lg px-4 py-2 sm:block 
diff --git a/view/component/nav/sidenav.templ b/view/component/nav/sidenav.templ
index 4eb8334..4487a61 100644
--- a/view/component/nav/sidenav.templ
+++ b/view/component/nav/sidenav.templ
@@ -1,7 +1,10 @@
 package nav
 
+import "projectreshoot/contexts"
+
 // Returns the mobile version of the navbar thats only visible when activated
 templ sideNav(navItems []NavItem) {
+	{{ user := contexts.GetUser(ctx) }}
 	<div
 		x-show="open"
 		x-transition
@@ -22,27 +25,29 @@ templ sideNav(navItems []NavItem) {
 				}
 			</ul>
 		</div>
-		<div class="px-4 pb-6">
-			<ul class="space-y-1">
-				<li class="flex justify-center items-center gap-2">
-					<a
-						class="w-26 px-4 py-2 rounded-lg
+		if user == nil {
+			<div class="px-4 pb-6">
+				<ul class="space-y-1">
+					<li class="flex justify-center items-center gap-2">
+						<a
+							class="w-26 px-4 py-2 rounded-lg
                         bg-green text-mantle  transition hover:bg-green/75
                         text-center"
-						href="/login"
-					>
-						Login
-					</a>
-					<a
-						class="w-26 px-4 py-2 rounded-lg
+							href="/login"
+						>
+							Login
+						</a>
+						<a
+							class="w-26 px-4 py-2 rounded-lg
                         bg-blue text-mantle  transition hover:bg-blue/75
                         text-center"
-						href="/register"
-					>
-						Register
-					</a>
-				</li>
-			</ul>
-		</div>
+							href="/register"
+						>
+							Register
+						</a>
+					</li>
+				</ul>
+			</div>
+		}
 	</div>
 }