Redmage/views/components/navigation.templ

package components

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

templ Navigation(c *views.Context) {
	<div class="drawer">
		<input id="drawer-toggle" type="checkbox" class="drawer-toggle" autocomplete="off"/>
		<div class="drawer-content">
			<header
				x-data="{ lastScrollPost: 0, hide: false, get onTop() { return this.lastScrollPost < 60 } }"
				class="navbar bg-base-200 z-50 lg:hidden transition-all duration-300 shadow-lg sticky top-0"
				:class="{ '-translate-y-full': !onTop && hide }"
				@scroll.window.throttle.50ms="hide = window.scrollY > lastScrollPost; lastScrollPost = window.scrollY;"
			>
				<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 z-[51]">
			<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>
				@navList(c)
			</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: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 hx-boost="true" class="flex-grow pt-4 min-h-full flex flex-col transition-all">
				@navList(c)
			</nav>
		</div>
	</header>
}

templ navList(c *views.Context) {
	@createLink(c, "/", "Home")
	@createLink(c, "/config", "Config")
	@createLink(c, "/devices", "Devices")
	@createLink(c, "/subreddits", "Subreddits")
	@createLink(c, "/history", "History")
	<div class="flex-1 flex-shrink-0"></div>
	<div class="divider"></div>
	@createLink(c, "/about", "About")
	<div class="mt-4"></div>
}

templ createLink(c *views.Context, path string, text string) {
	<a
		href={ templ.URL(path) }
		class={ utils.CX(map[string]bool{
            "hover:bg-accent": true,
            "hover:text-neutral-50": true,
            "py-2": true,
            "text-center": true,
            "font-bold": isCurrentPage(c, path),
            "hover:font-bold": true,
        }) }
	>{ text }</a>
}

func isCurrentPage(c *views.Context, path string) bool {
	if path == "/" && c.Request.URL.Path == "/" {
		return true
	} else if strings.HasPrefix(c.Request.URL.Path, path) && path != "/" {
		return true
	}
	return false
}