119 lines
3.5 KiB
Plaintext
119 lines
3.5 KiB
Plaintext
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"/>
|
|
<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>
|
|
@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
|
|
}
|