Redmage/views/components/navigation.templ

package components

import "github.com/tigorlazuardi/redmage/views"
import "strings"

templ Navigation(c *views.Context) {
	<div class="drawer">
		<input id="drawer-toggle" type="checkbox" class="drawer-toggle"/>
		<div class="drawer-content">
			<header class="navbar bg-base-200 lg:hidden">
				<div class="flex-none">
					<label for="drawer-toggle" class="btn btn-square btn-ghost drawer-button">
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
					</label>
				</div>
				<div class="flex-none">
					<button class="btn btn-square btn-ghost">
						@navLogo()
					</button>
				</div>
				<div class="flex-1">
					<a href="/" class="btn btn-ghost text-xl">Redmage</a>
				</div>
			</header>
			{ children... }
		</div>
		<nav class="drawer-side">
			<label for="drawer-toggle" class="drawer-overlay"></label>
			<div class="menu py-4 min-w-[15rem] min-h-full bg-base-200 text-base-content">
				<div class="flex flex-col items-center min-w-[180px] max-w-[280px]">
					@navLogo()
					<span class="font-bold">Redmage</span>
				</div>
				<div class="divider"></div>
				<ul>
					<a href="/" class={ classForNavItem(c, "/") }>
						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Home</li>
					</a>
					<a href="/about" class={ classForNavItem(c, "/about") }>
						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">About</li>
					</a>
					<a href="/config" class={ classForNavItem(c, "/config") }>
						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Config</li>
					</a>
					<a href="/browse" class={ classForNavItem(c, "/browse") }>
						<li class="hover:bg-accent hover:text-neutral-50 py-2 pl-4 hover:font-bold">Browse</li>
					</a>
				</ul>
			</div>
		</nav>
	</div>
}

func cx(m map[string]bool) string {
	var res string
	for k, v := range m {
		if v {
			res += k + " "
		}
	}
	return res
}

func classForNavItem(c *views.Context, prefix string) string {
	classNames := map[string]bool{}
	if prefix == "/" && c.Request.URL.Path == "/" {
		classNames["font-bold"] = true
		return cx(classNames)
	} else if strings.HasPrefix(c.Request.URL.Path, prefix) && prefix != "/" {
		classNames["font-bold"] = true
	}
	return cx(classNames)
}

templ navLogo() {
	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 18.75 7.5-7.5 7.5 7.5"></path>
		<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 7.5-7.5 7.5 7.5"></path>
	</svg>
}

templ Navbar(c *views.Context) {
	<header class="hidden lg:inline-block bg-base-200 min-w-[200px] w-[15vw] max-w-[300px]">
		<div class="sticky top-0 flex flex-col min-h-screen">
			<div class="flex flex-col items-center min-w-[180px] max-w-[280px] mx-auto">
				@navLogo()
				<span class="font-bold">Redmage</span>
			</div>
			<div class="divider"></div>
			<nav class="pt-4" hx-boost="true" hx-select="main" hx-target="main">
				@navList(c)
			</nav>
			<div class="flex-grow"></div>
			@SelectThemeInput()
		</div>
	</header>
}

templ navList(c *views.Context) {
	<ul class="flex flex-col flex-wrap">
		<a href="/" class={ classForNavItem(c, "/") }>
			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li>
		</a>
		<a href="/about" class={ classForNavItem(c, "/about") }>
			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">About</li>
		</a>
		<a href="/config" class={ classForNavItem(c, "/config") }>
			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Config</li>
		</a>
		<a href="/subreddits" class={ classForNavItem(c, "/subreddits") }>
			<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Subreddits</li>
		</a>
	</ul>
}

templ SelectThemeInput() {
	<select class="select select-ghost select-bordered w-full" data-choose-theme>
		<option value="light">Light (Default)</option>
		<option value="dark">Dark</option>
		<option value="cupcake">Cupcake</option>
		<option value="bumblebee">Bumblebee</option>
		<option value="emerald">Emerald</option>
		<option value="corporate">Corporate</option>
		<option value="synthwave">Synthwave</option>
		<option value="retru">Retro</option>
		<option value="cyberpunk">Cyberpunk</option>
		<option value="valentine">Valentine</option>
		<option value="halloween">Halloween</option>
	</select>
}