refactored view package
This commit is contained in:
233
internal/view/baseview/navbar.templ
Normal file
233
internal/view/baseview/navbar.templ
Normal file
@@ -0,0 +1,233 @@
|
||||
package baseview
|
||||
|
||||
import (
|
||||
"context"
|
||||
"git.haelnorr.com/h/oslstats/internal/contexts"
|
||||
"git.haelnorr.com/h/oslstats/internal/db"
|
||||
)
|
||||
|
||||
type NavItem struct {
|
||||
Name string
|
||||
Href string
|
||||
}
|
||||
|
||||
type ProfileItem struct {
|
||||
Name string
|
||||
Href string
|
||||
}
|
||||
|
||||
// Main navigation items (centralized)
|
||||
func getNavItems() []NavItem {
|
||||
return []NavItem{
|
||||
{Name: "Seasons", Href: "/seasons"},
|
||||
}
|
||||
}
|
||||
|
||||
// Profile dropdown items (context-aware for admin)
|
||||
func getProfileItems(ctx context.Context) []ProfileItem {
|
||||
items := []ProfileItem{
|
||||
{Name: "Profile", Href: "/profile"},
|
||||
{Name: "Account", Href: "/account"},
|
||||
}
|
||||
|
||||
cache := contexts.Permissions(ctx)
|
||||
if cache != nil && cache.Roles["admin"] {
|
||||
items = append(items, ProfileItem{
|
||||
Name: "Admin Panel",
|
||||
Href: "/admin",
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
// Main navbar component
|
||||
templ Navbar() {
|
||||
{{ navItems := getNavItems() }}
|
||||
{{ user := db.CurrentUser(ctx) }}
|
||||
{{ profileItems := getProfileItems(ctx) }}
|
||||
<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">
|
||||
<!-- Logo -->
|
||||
<a class="block" href="/">
|
||||
<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">
|
||||
<!-- Desktop nav links -->
|
||||
@desktopNav(navItems)
|
||||
<!-- User menu / Login button -->
|
||||
@userMenu(user, profileItems)
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Mobile side nav -->
|
||||
@mobileNav(navItems, user)
|
||||
</div>
|
||||
}
|
||||
|
||||
// Desktop navigation (private helper)
|
||||
templ desktopNav(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>
|
||||
}
|
||||
|
||||
// User menu section (private helper)
|
||||
templ userMenu(user *db.User, profileItems []ProfileItem) {
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="sm:flex sm:gap-2">
|
||||
if user != nil {
|
||||
@profileDropdown(user, profileItems)
|
||||
} else {
|
||||
@loginButton()
|
||||
}
|
||||
</div>
|
||||
@mobileMenuButton()
|
||||
</div>
|
||||
}
|
||||
|
||||
// Profile dropdown (private helper)
|
||||
templ profileDropdown(user *db.User, items []ProfileItem) {
|
||||
<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"
|
||||
>
|
||||
<!-- Profile links -->
|
||||
<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>
|
||||
<!-- Logout -->
|
||||
<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>
|
||||
}
|
||||
|
||||
// Login button (private helper)
|
||||
templ loginButton() {
|
||||
<button
|
||||
class="hidden rounded-lg px-4 py-2 sm:block hover:cursor-pointer
|
||||
bg-green hover:bg-green/75 text-mantle transition"
|
||||
hx-post="/login"
|
||||
hx-swap="none"
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
}
|
||||
|
||||
// Mobile menu toggle (private helper)
|
||||
templ mobileMenuButton() {
|
||||
<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>
|
||||
}
|
||||
|
||||
// Mobile navigation drawer (private helper)
|
||||
templ mobileNav(navItems []NavItem, user *db.User) {
|
||||
<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>
|
||||
}
|
||||
Reference in New Issue
Block a user