127 lines
4.5 KiB
Plaintext
127 lines
4.5 KiB
Plaintext
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">
|
|
<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="/browse" class={ classForNavItem(c, "/browse") }>
|
|
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Browse</li>
|
|
</a>
|
|
</ul>
|
|
</nav>
|
|
<div class="flex-grow"></div>
|
|
@SelectThemeInput()
|
|
</div>
|
|
</header>
|
|
}
|
|
|
|
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>
|
|
}
|