Redmage/views/components/navigation.templ

124 lines
3.9 KiB
Plaintext
Raw Permalink Normal View History

2024-04-09 16:09:08 +07:00
package components
import "github.com/tigorlazuardi/redmage/views"
import "strings"
2024-05-04 15:43:08 +07:00
import "github.com/tigorlazuardi/redmage/views/utils"
2024-04-09 16:09:08 +07:00
templ Navigation(c *views.Context) {
<div class="drawer">
<input id="drawer-toggle" type="checkbox" class="drawer-toggle" autocomplete="off"/>
2024-04-09 16:09:08 +07:00
<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;"
>
2024-04-09 16:09:08 +07:00
<div class="flex-none">
2024-04-29 13:31:09 +07:00
<label for="drawer-toggle" class="btn btn-square btn-ghost drawer-button">
2024-04-09 16:09:08 +07:00
<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]">
2024-04-09 16:09:08 +07:00
<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>
2024-05-02 09:25:06 +07:00
@navList(c)
2024-04-09 16:09:08 +07:00
</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) {
2024-05-04 15:43:08 +07:00
<header class="hidden lg:block bg-base-200 min-w-[200px] w-[15vw] max-w-[300px]">
2024-04-29 13:31:09 +07:00
<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)
2024-04-29 13:31:09 +07:00
</nav>
2024-04-09 16:09:08 +07:00
</div>
</header>
}
2024-04-29 13:31:09 +07:00
templ navList(c *views.Context) {
@createLink(c, "/", "Home")
@createLink(c, "/config", "Config")
@createLink(c, "/devices", "Devices")
@createLink(c, "/subreddits", "Subreddits")
@createLink(c, "/history", "History")
2024-05-04 15:43:08 +07:00
<div class="flex-1 flex-shrink-0"></div>
<div class="divider"></div>
@createLink(c, "/about", "About")
2024-05-04 15:43:08 +07:00
<div class="mt-4"></div>
}
templ createLink(c *views.Context, path string, text string) {
2024-05-04 15:43:08 +07:00
<a
href={ templ.URL(path) }
2024-05-04 15:43:08 +07:00
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,
2024-05-04 15:43:08 +07:00
}) }
>{ 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
}