Added dropdown to profile button

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
+				<div x-data="{ isActive: false }" class="relative">
-					class="hidden rounded-lg px-4 py-2 sm:block 
+					<div
-                bg-sapphire hover:bg-sapphire/75 text-mantle transition"
+						class="inline-flex items-center overflow-hidden
-					href="#"
+                        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 

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,6 +25,7 @@ templ sideNav(navItems []NavItem) {
 				}
 			</ul>
 		</div>
+		if user == nil {
 			<div class="px-4 pb-6">
 				<ul class="space-y-1">
 					<li class="flex justify-center items-center gap-2">
@@ -44,5 +48,6 @@ templ sideNav(navItems []NavItem) {
 					</li>
 				</ul>
 			</div>
+		}
 	</div>
 }