Skip to content
Snippets Groups Projects
Commit bf33c068 authored by Phil Harris's avatar Phil Harris
Browse files

refactor: simplify sidebar structure with reusable components

parent bc2a293f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/layouts/layout.templ
+ 24
− 15
View file @ bf33c068
...@@ -25,24 +25,17 @@ templ Main() { ...@@ -25,24 +25,17 @@ templ Main() {
<h1><a href="/">Socket</a></h1> <h1><a href="/">Socket</a></h1>
</header> </header>
<main id="sidebar-main"> <main id="sidebar-main">
<a href="/" class="sidebar-link">Home</a> // simple link @sidebarLink("/", "Home")
<div id="sidebar-services" class="sidebar-dropdown" x-data="{open: $persist(false).using(sessionStorage).as($el.id)}"> @sidebarDropdown("sidebar-services", "Services") {
// example of a dropdown menu @sidebarLink("/services/1", "Service 1")
<h2 class="list-none cursor-pointer" @click="open = !open"> @sidebarLink("/services/2", "Service 2")
Services }
<span x-text="open ? '▲' : '▼'" class="float-right"></span> @sidebarLink("/about", "About")
</h2> @sidebarLink("/contact", "Contact")
<div x-show="open" x-collapse.duration.300ms x-cloak>
<a href="/services/1" class="sidebar-link">Service 1</a>
<a href="/services/2" class="sidebar-link">Service 2</a>
</div>
</div>
<a href="/about" class="sidebar-link">About</a>
<a href="/contact" class="sidebar-link">Contact</a>
</main> </main>
<footer id="sidebar-footer"> <footer id="sidebar-footer">
<div id="footer-actions"> <div id="footer-actions">
<a href="/logout" class="sidebar-link">Logout</a> @sidebarLink("/logout", "Logout")
</div> </div>
<div id="sidebar-copyright"> <div id="sidebar-copyright">
&copy; { fmt.Sprint(time.Now().Year()) } Cardiff University &copy; { fmt.Sprint(time.Now().Year()) } Cardiff University
...@@ -56,3 +49,19 @@ templ Main() { ...@@ -56,3 +49,19 @@ templ Main() {
</body> </body>
</html> </html>
} }
templ sidebarLink(href string, text string) {
<a href={ href } class="sidebar-link">{ text }</a>
}
templ sidebarDropdown(id, title string) {
<div id={ id } class="sidebar-dropdown" x-data="{open: $persist(false).using(sessionStorage).as($el.id)}">
<h2 class="list-none cursor-pointer" @click="open = !open">
{ title }
<span x-text="open ? '▲' : '▼'" class="float-right"></span>
</h2>
<div x-show="open" x-collapse.duration.300ms x-cloak>
{ children... }
</div>
</div>
}
web/layouts/layout_templ.go
+ 175
− 7
View file @ bf33c068
...@@ -100,20 +100,74 @@ func Main() templ.Component { ...@@ -100,20 +100,74 @@ func Main() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"></script></head><body class=\"grid grid-cols-[14rem_1fr]\"><aside id=\"sidebar\"><header id=\"sidebar-header\"><h1><a href=\"/\">Socket</a></h1></header><main id=\"sidebar-main\"><a href=\"/\" class=\"sidebar-link\">Home</a><div id=\"sidebar-services\" class=\"sidebar-dropdown\" x-data=\"{open: $persist(false).using(sessionStorage).as($el.id)}\"><h2 class=\"list-none cursor-pointer\" @click=\"open = !open\">Services <span x-text=\"open ? &#39;▲&#39; : &#39;▼&#39;\" class=\"float-right\"></span></h2><div x-show=\"open\" x-collapse.duration.300ms x-cloak><a href=\"/services/1\" class=\"sidebar-link\">Service 1</a> <a href=\"/services/2\" class=\"sidebar-link\">Service 2</a></div></div><a href=\"/about\" class=\"sidebar-link\">About</a> <a href=\"/contact\" class=\"sidebar-link\">Contact</a></main><footer id=\"sidebar-footer\"><div id=\"footer-actions\"><a href=\"/logout\" class=\"sidebar-link\">Logout</a></div><div id=\"sidebar-copyright\">&copy; ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "\"></script></head><body class=\"grid grid-cols-[14rem_1fr]\"><aside id=\"sidebar\"><header id=\"sidebar-header\"><h1><a href=\"/\">Socket</a></h1></header><main id=\"sidebar-main\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var7 string templ_7745c5c3_Err = sidebarLink("/", "Home").Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(time.Now().Year()))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layouts/layout.templ`, Line: 48, Col: 44} return templ_7745c5c3_Err
}
templ_7745c5c3_Var7 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = sidebarLink("/services/1", "Service 1").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = sidebarLink("/services/2", "Service 2").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
templ_7745c5c3_Err = sidebarDropdown("sidebar-services", "Services").Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = sidebarLink("/about", "About").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) templ_7745c5c3_Err = sidebarLink("/contact", "Contact").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " Cardiff University</div></footer></aside><main id=\"body-content\"><h1 class=\"text-4xl font-semibold\">From Layout</h1>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</main><footer id=\"sidebar-footer\"><div id=\"footer-actions\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = sidebarLink("/logout", "Logout").Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</div><div id=\"sidebar-copyright\">&copy; ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprint(time.Now().Year()))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layouts/layout.templ`, Line: 41, Col: 44}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " Cardiff University</div></footer></aside><main id=\"body-content\"><h1 class=\"text-4xl font-semibold\">From Layout</h1>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
...@@ -121,7 +175,121 @@ func Main() templ.Component { ...@@ -121,7 +175,121 @@ func Main() templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</main></body></html>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</main></body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
func sidebarLink(href string, text 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 {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var9 := templ.GetChildren(ctx)
if templ_7745c5c3_Var9 == nil {
templ_7745c5c3_Var9 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var10 templ.SafeURL = href
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var10)))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\" class=\"sidebar-link\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(text)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layouts/layout.templ`, Line: 54, Col: 45}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
func sidebarDropdown(id, title 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 {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var12 := templ.GetChildren(ctx)
if templ_7745c5c3_Var12 == nil {
templ_7745c5c3_Var12 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<div id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layouts/layout.templ`, Line: 58, Col: 13}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"sidebar-dropdown\" x-data=\"{open: $persist(false).using(sessionStorage).as($el.id)}\"><h2 class=\"list-none cursor-pointer\" @click=\"open = !open\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `web/layouts/layout.templ`, Line: 60, Col: 10}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " <span x-text=\"open ? &#39;▲&#39; : &#39;▼&#39;\" class=\"float-right\"></span></h2><div x-show=\"open\" x-collapse.duration.300ms x-cloak>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var12.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment