ditatompel/xmr-remote-nodes
1
0
Fork 0
mirror of https://github.com/ditatompel/xmr-remote-nodes.git synced 2025-01-08 05:52:10 +07:00
Code Issues Projects Releases Packages Wiki Activity

feat: Added navbar current page position indicator

Browse source
This commit is contained in:
Cristian Ditaputratama 2024-10-30 15:39:01 +07:00
parent dd48bd458a
commit 965d3230a1
Signed by: ditatompel
GPG key ID: 31D3D06D77950979
5 changed files with 64 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
internal/handler/views/layout.templ
View file

@ -42,7 +42,7 @@ templ base(m Meta) {
<script src={ fmt.Sprintf("/assets/js/main.min.js?t=%d", buildTime) }></script>
</head>
<body class="bg-neutral-900" hx-boost="true" hx-indicator="#hx-indicator-main">
@navbar()
@navbar(m.Identifier)
<main class="flex flex-col h-screen">
{ children... }
</main>

2
internal/handler/views/layout_templ.go
View file

@ -193,7 +193,7 @@ func base(m Meta) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = navbar().Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = navbar(m.Identifier).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

26
internal/handler/views/partial_navbar.templ
View file

@ -1,6 +1,6 @@
package views
templ navbar() {
templ navbar(pageIdentifier string) {
<header class="sticky top-4 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full before:absolute before:inset-0 before:max-w-[66rem] before:mx-2 before:lg:mx-auto before:rounded-[26px] before:bg-neutral-800/30 before:backdrop-blur-md">
<nav class="relative max-w-[66rem] w-full py-2.5 ps-5 pe-2 md:flex md:items-center md:justify-between md:py-0 mx-2 lg:mx-auto">
<div class="flex items-center justify-between">
@ -20,9 +20,27 @@ templ navbar() {
<!-- Collapse -->
<div id="main-navbar" class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="main-navbar-collapse">
<div class="flex flex-col md:flex-row md:items-center md:justify-end gap-2 md:gap-3 mt-3 md:mt-0 py-2 md:py-0 md:ps-7">
<a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-orange-400 font-medium text-neutral-200 focus:outline-none" href="/" aria-current="page">Home</a>
<a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" href="/remote-nodes">Remote Nodes</a>
<a class="py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200" href="/add-node">Add Node</a>
<a
href="/"
if pageIdentifier == "/" {
class="active"
aria-current="page"
}
>Home</a>
<a
href="/remote-nodes"
if pageIdentifier == "/remote-nodes" {
class="active"
aria-current="page"
}
>Remote Nodes</a>
<a
href="/add-node"
if pageIdentifier == "/add-node" {
class="active"
aria-current="page"
}
>Add Node</a>
</div>
</div>
<!-- End Collapse -->

34
internal/handler/views/partial_navbar_templ.go
View file

@ -8,7 +8,7 @@ package views
import "github.com/a-h/templ"
import templruntime "github.com/a-h/templ/runtime"
func navbar() templ.Component {
func navbar(pageIdentifier string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@ -29,7 +29,37 @@ func navbar() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<header class=\"sticky top-4 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full before:absolute before:inset-0 before:max-w-[66rem] before:mx-2 before:lg:mx-auto before:rounded-[26px] before:bg-neutral-800/30 before:backdrop-blur-md\"><nav class=\"relative max-w-[66rem] w-full py-2.5 ps-5 pe-2 md:flex md:items-center md:justify-between md:py-0 mx-2 lg:mx-auto\"><div class=\"flex items-center justify-between\"><div class=\"flex-none inline-block\"><a class=\"text-xl font-semibold text-white focus:outline-none\" href=\"/\" aria-label=\"XMR Nodes\">XMR Nodes</a><div id=\"hx-indicator-main\" class=\"htmx-indicator animate-spin ml-2 inline-block size-4 border-[3px] border-current border-t-transparent text-blue-500 rounded-full\" role=\"status\" aria-label=\"loading indicator\"><span class=\"sr-only\">Loading...</span></div></div><div class=\"md:hidden\"><button type=\"button\" class=\"hs-collapse-toggle size-8 flex justify-center items-center text-sm font-semibold rounded-full bg-neutral-800 text-white disabled:opacity-50 disabled:pointer-events-none\" id=\"hs-navbar-floating-dark-collapse\" aria-expanded=\"false\" aria-controls=\"hs-navbar-floating-dark\" aria-label=\"Toggle navigation\" data-hs-collapse=\"#main-navbar\"><svg class=\"hs-collapse-open:hidden shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" x2=\"21\" y1=\"6\" y2=\"6\"></line><line x1=\"3\" x2=\"21\" y1=\"12\" y2=\"12\"></line><line x1=\"3\" x2=\"21\" y1=\"18\" y2=\"18\"></line></svg> <svg class=\"hs-collapse-open:block hidden shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div></div><!-- Collapse --><div id=\"main-navbar\" class=\"hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block\" aria-labelledby=\"main-navbar-collapse\"><div class=\"flex flex-col md:flex-row md:items-center md:justify-end gap-2 md:gap-3 mt-3 md:mt-0 py-2 md:py-0 md:ps-7\"><a class=\"py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-orange-400 font-medium text-neutral-200 focus:outline-none\" href=\"/\" aria-current=\"page\">Home</a> <a class=\"py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200\" href=\"/remote-nodes\">Remote Nodes</a> <a class=\"py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200\" href=\"/add-node\">Add Node</a></div></div><!-- End Collapse --></nav></header>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<header class=\"sticky top-4 inset-x-0 flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full before:absolute before:inset-0 before:max-w-[66rem] before:mx-2 before:lg:mx-auto before:rounded-[26px] before:bg-neutral-800/30 before:backdrop-blur-md\"><nav class=\"relative max-w-[66rem] w-full py-2.5 ps-5 pe-2 md:flex md:items-center md:justify-between md:py-0 mx-2 lg:mx-auto\"><div class=\"flex items-center justify-between\"><div class=\"flex-none inline-block\"><a class=\"text-xl font-semibold text-white focus:outline-none\" href=\"/\" aria-label=\"XMR Nodes\">XMR Nodes</a><div id=\"hx-indicator-main\" class=\"htmx-indicator animate-spin ml-2 inline-block size-4 border-[3px] border-current border-t-transparent text-blue-500 rounded-full\" role=\"status\" aria-label=\"loading indicator\"><span class=\"sr-only\">Loading...</span></div></div><div class=\"md:hidden\"><button type=\"button\" class=\"hs-collapse-toggle size-8 flex justify-center items-center text-sm font-semibold rounded-full bg-neutral-800 text-white disabled:opacity-50 disabled:pointer-events-none\" id=\"hs-navbar-floating-dark-collapse\" aria-expanded=\"false\" aria-controls=\"hs-navbar-floating-dark\" aria-label=\"Toggle navigation\" data-hs-collapse=\"#main-navbar\"><svg class=\"hs-collapse-open:hidden shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" x2=\"21\" y1=\"6\" y2=\"6\"></line><line x1=\"3\" x2=\"21\" y1=\"12\" y2=\"12\"></line><line x1=\"3\" x2=\"21\" y1=\"18\" y2=\"18\"></line></svg> <svg class=\"hs-collapse-open:block hidden shrink-0 size-4\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\"></path></svg></button></div></div><!-- Collapse --><div id=\"main-navbar\" class=\"hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block\" aria-labelledby=\"main-navbar-collapse\"><div class=\"flex flex-col md:flex-row md:items-center md:justify-end gap-2 md:gap-3 mt-3 md:mt-0 py-2 md:py-0 md:ps-7\"><a href=\"/\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if pageIdentifier == "/" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"active\" aria-current=\"page\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Home</a> <a href=\"/remote-nodes\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if pageIdentifier == "/remote-nodes" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"active\" aria-current=\"page\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Remote Nodes</a> <a href=\"/add-node\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if pageIdentifier == "/add-node" {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" class=\"active\" aria-current=\"page\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Add Node</a></div></div><!-- End Collapse --></nav></header>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

8
internal/handler/views/src/css/main.css
View file

@ -1,3 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* main navbar */
#main-navbar div a {
@apply py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200;
}
#main-navbar div a.active {
@apply py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-orange-400 font-medium text-neutral-200 focus:outline-none;
}