tigor/Redmage
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

view: simplified navigation bar

Browse source
This commit is contained in:
Tigor Hutasuhut 2024-05-04 15:43:08 +07:00
parent 396f426b9c
commit 2e71aa15ca
1 changed files with 35 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
views/components/navigation.templ
View file

@ -2,6 +2,8 @@ package components
import "github.com/tigorlazuardi/redmage/views" import "github.com/tigorlazuardi/redmage/views"
import "strings" import "strings"
import "github.com/tigorlazuardi/redmage/views/utils"
import "strconv"
templ Navigation(c *views.Context) { templ Navigation(c *views.Context) {
<div class="drawer"> <div class="drawer">
@ -67,34 +69,50 @@ templ navLogo() {
} }
templ Navbar(c *views.Context) { templ Navbar(c *views.Context) {
<header class="hidden lg:inline-block bg-base-200 min-w-[200px] w-[15vw] max-w-[300px]"> <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="sticky top-0 flex flex-col min-h-screen">
<div class="flex flex-col items-center min-w-[180px] max-w-[280px] mx-auto"> <div class="flex flex-col items-center min-w-[180px] max-w-[280px] mx-auto">
@navLogo() @navLogo()
<span class="font-bold">Redmage</span> <span class="font-bold">Redmage</span>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<nav class="pt-4"> <nav class="flex-grow pt-4 min-h-full flex flex-col transition-all">
@navList(c) @navList(c)
</nav> </nav>
<div class="flex-grow"></div>
</div> </div>
</header> </header>
} }
templ navList(c *views.Context) { templ navList(c *views.Context) {
<ul hx-boost="true" class="flex flex-col flex-wrap transition-all"> @createLink(c, "/", "Home", true)
<a href="/" class={ classForNavItem(c, "/") }> @createLink(c, "/config", "Config", false)
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Home</li> @createLink(c, "/subreddits", "Subreddits", true)
</a> <div class="flex-1 flex-shrink-0"></div>
<a href="/about" class={ classForNavItem(c, "/about") }> <div class="divider"></div>
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">About</li> @createLink(c, "/about", "About", true)
</a> <div class="mt-4"></div>
<a hx-boost="false" 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> templ createLink(c *views.Context, path string, text string, boost bool) {
<a href="/subreddits" class={ classForNavItem(c, "/subreddits") }> <a
<li class="hover:bg-accent hover:text-neutral-50 py-2 text-center hover:font-bold">Subreddits</li> href={ templ.SafeURL(path) }
</a> class={ utils.CX(map[string]bool{
</ul> "hover:bg-accent": true,
"hover:text-neutral-50": true,
"py-2": true,
"text-center": true,
"font-bold": isCurrentPage(c, path),
"hover:font-bold": true,
}) }
hx-boost={ strconv.FormatBool(boost) }
>{ 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
} }