initial commit

internal/view/component/nav/navbar.templ

@@ -0,0 +1,36 @@
+package nav
+
+type NavItem struct {
+	name string // Label to display
+	href string // Link reference
+}
+
+// Return the list of navbar links
+func getNavItems() []NavItem {
+	return []NavItem{}
+}
+
+// Returns the navbar template fragment
+templ Navbar() {
+	{{ navItems := getNavItems() }}
+	<div x-data="{ open: false }">
+		<header class="bg-crust">
+			<div
+				class="mx-auto flex h-16 max-w-7xl items-center gap-8
+                px-4 sm:px-6 lg:px-8"
+			>
+				<a class="block" href="/">
+					<!-- logo here -->
+					<span class="text-3xl font-bold transition hover:text-green">
+						OSL Stats
+					</span>
+				</a>
+				<div class="flex flex-1 items-center justify-end sm:justify-between">
+					@navLeft(navItems)
+					@navRight()
+				</div>
+			</div>
+		</header>
+		@sideNav(navItems)
+	</div>
+}

internal/view/component/nav/navbarleft.templ

@@ -0,0 +1,19 @@
+package nav
+
+// Returns the left portion of the navbar
+templ navLeft(navItems []NavItem) {
+	<nav aria-label="Global" class="hidden sm:block">
+		<ul class="flex items-center gap-6 text-xl">
+			for _, item := range navItems {
+				<li>
+					<a
+						class="text-subtext1 hover:text-green transition"
+						href={ templ.SafeURL(item.href) }
+					>
+						{ item.name }
+					</a>
+				</li>
+			}
+		</ul>
+	</nav>
+}

internal/view/component/nav/navbarright.templ

@@ -0,0 +1,115 @@
+package nav
+
+import "git.haelnorr.com/h/oslstats/pkg/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.CurrentUser(ctx) }}
+	{{ items := getProfileItems() }}
+	<div class="flex items-center gap-2">
+		<div class="sm:flex sm:gap-2">
+			if user != nil {
+				<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 hover:cursor-pointer"
+						>
+							<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"
+									@click="isActive=false"
+								>
+									Logout
+								</button>
+							</form>
+						</div>
+					</div>
+				</div>
+			} else {
+				<a
+					class="hidden rounded-lg px-4 py-2 sm:block 
+                bg-green hover:bg-green/75 text-mantle transition"
+					href="/login"
+				>
+					Login
+				</a>
+			}
+		</div>
+		<button
+			@click="open = !open"
+			class="block rounded-lg p-2.5 sm:hidden transition
+            bg-surface0 text-subtext0 hover:text-overlay2/75"
+		>
+			<span class="sr-only">Toggle menu</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M4 6h16M4 12h16M4 18h16"
+				></path>
+			</svg>
+		</button>
+	</div>
+}

internal/view/component/nav/sidenav.templ

@@ -0,0 +1,45 @@
+package nav
+
+import "git.haelnorr.com/h/oslstats/pkg/contexts"
+
+// Returns the mobile version of the navbar thats only visible when activated
+templ sideNav(navItems []NavItem) {
+	{{ user := contexts.CurrentUser(ctx) }}
+	<div
+		x-show="open"
+		x-transition
+		class="absolute w-full bg-mantle sm:hidden z-10"
+	>
+		<div class="px-4 py-6">
+			<ul class="space-y-1">
+				for _, item := range navItems {
+					<li>
+						<a
+							href={ templ.SafeURL(item.href) }
+							class="block rounded-lg  px-4 py-2 text-lg
+                            bg-surface0 text-text transition hover:bg-surface2"
+						>
+							{ item.name }
+						</a>
+					</li>
+				}
+			</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">
+						<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>
+					</li>
+				</ul>
+			</div>
+		}
+	</div>
+}