simplified tailwind classes and removed collapsing sidebar make it static

This commit is contained in:
Robin Olsen
2026-02-17 22:26:25 +01:00
parent 1e5bfcc0ba
commit 61e5109f9a
4 changed files with 18 additions and 70 deletions

View File

@@ -19,25 +19,6 @@ templ Layout(props LayoutProps) {
{ children... } { children... }
</main> </main>
</div> </div>
<script>
function toggleSidebar() {
const sidebar = document.getElementById("sidebar");
if (!sidebar) return;
const labels = sidebar.querySelectorAll(".sidebar-label");
const links = sidebar.querySelectorAll(".sidebar-link, .sidebar-toggle");
sidebar.classList.toggle("w-56");
sidebar.classList.toggle("w-16");
labels.forEach(label => {
label.classList.toggle("hidden");
});
links.forEach(link => {
link.classList.toggle("justify-start");
link.classList.toggle("justify-center");
link.classList.toggle("gap-3");
link.classList.toggle("gap-0");
});
}
</script>
</body> </body>
</html> </html>
} }

View File

@@ -87,7 +87,7 @@ func Layout(props LayoutProps) 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, 7, "</main></div><script>\n\t\t\tfunction toggleSidebar() {\n\tconst sidebar = document.getElementById(\"sidebar\");\n\tif (!sidebar) return;\n\tconst labels = sidebar.querySelectorAll(\".sidebar-label\");\n\tconst links = sidebar.querySelectorAll(\".sidebar-link, .sidebar-toggle\");\n\t\tsidebar.classList.toggle(\"w-56\");\n\tsidebar.classList.toggle(\"w-16\");\n\tlabels.forEach(label => {\n\t\tlabel.classList.toggle(\"hidden\");\n\t});\n\tlinks.forEach(link => {\n\t\tlink.classList.toggle(\"justify-start\");\n\t\tlink.classList.toggle(\"justify-center\");\n\t\tlink.classList.toggle(\"gap-3\");\n\t\tlink.classList.toggle(\"gap-0\");\n\t});\n}\n\t\t\t</script></body></html>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</main></div></body></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -137,7 +137,7 @@ func Head(props HeadProps) templ.Component {
var templ_7745c5c3_Var5 templ.SafeURL var templ_7745c5c3_Var5 templ.SafeURL
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs(link.Href) templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs(link.Href)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 60, Col: 24} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 41, Col: 24}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -150,7 +150,7 @@ func Head(props HeadProps) templ.Component {
var templ_7745c5c3_Var6 string var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(link.Rel) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(link.Rel)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 60, Col: 41} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 41, Col: 41}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -163,7 +163,7 @@ func Head(props HeadProps) templ.Component {
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(link.As) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(link.As)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 60, Col: 56} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 41, Col: 56}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -182,7 +182,7 @@ func Head(props HeadProps) templ.Component {
var templ_7745c5c3_Var8 string var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(script.Src) templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(script.Src)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 63, Col: 26} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 44, Col: 26}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -195,7 +195,7 @@ func Head(props HeadProps) templ.Component {
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(script.Defer) templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(script.Defer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 63, Col: 49} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 44, Col: 49}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -254,7 +254,7 @@ func Header(props HeaderProps) templ.Component {
var templ_7745c5c3_Var11 string var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(props.Title) templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(props.Title)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 86, Col: 49} return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/layout.templ`, Line: 67, Col: 49}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {

View File

@@ -3,35 +3,23 @@ package components
templ Sidebar(routes []NavRoutes) { templ Sidebar(routes []NavRoutes) {
<aside <aside
id="sidebar" id="sidebar"
class="w-56 shrink-0 flex flex-col min-h-0 bg-base-100 border-r border-base-300 shadow-sm transition-all duration-300" class="flex flex-col bg-base-100 border-r border-base-300 transition-all duration-300"
> >
<nav class="flex-1 overflow-y-auto py-3 px-2"> <nav class="flex-1 overflow-y-auto p-2">
<ul class="menu menu-vertical w-full p-0 gap-0.5"> <ul class="menu menu-vertical p-0">
for _, r := range routes { for _, r := range routes {
<li> <li>
<a <a
href={ r.Path } href={ r.Path }
class="sidebar-link rounded-lg py-2.5 px-3 text-base-content font-medium no-underline hover:bg-base-200 active:bg-base-200 transition-colors duration-150 flex items-center gap-3 min-w-0" class="sidebar-link rounded-lg py-2.5 px-3 text-base-content items-center"
> >
if r.Icon != nil { if r.Icon != nil {
<span class="sidebar-icon shrink-0 flex items-center justify-center [&>svg]:w-5 [&>svg]:h-5">@r.Icon</span> <span class="sidebar-icon flex items-center justify-center">@r.Icon</span>
} }
<span class="sidebar-label truncate">{ r.Name }</span>
</a> </a>
</li> </li>
} }
</ul> </ul>
</nav> </nav>
<div class="border-t border-base-300 p-2 shrink-0">
<button
type="button"
class="sidebar-toggle btn btn-ghost btn-sm w-full justify-start text-base-content/80 hover:text-base-content hover:bg-base-200 rounded-lg flex items-center gap-3"
onclick="toggleSidebar()"
aria-label="Collapse sidebar"
>
<span class="sidebar-icon shrink-0">@IconCollapse()</span>
<span class="sidebar-label">Collapse</span>
</button>
</div>
</aside> </aside>
} }

View File

@@ -29,7 +29,7 @@ func Sidebar(routes []NavRoutes) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside id=\"sidebar\" class=\"w-56 shrink-0 flex flex-col min-h-0 bg-base-100 border-r border-base-300 shadow-sm transition-all duration-300\"><nav class=\"flex-1 overflow-y-auto py-3 px-2\"><ul class=\"menu menu-vertical w-full p-0 gap-0.5\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<aside id=\"sidebar\" class=\"flex flex-col bg-base-100 border-r border-base-300 transition-all duration-300\"><nav class=\"flex-1 overflow-y-auto p-2\"><ul class=\"menu menu-vertical p-0\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -47,12 +47,12 @@ func Sidebar(routes []NavRoutes) 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, 3, "\" class=\"sidebar-link rounded-lg py-2.5 px-3 text-base-content font-medium no-underline hover:bg-base-200 active:bg-base-200 transition-colors duration-150 flex items-center gap-3 min-w-0\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "\" class=\"sidebar-link rounded-lg py-2.5 px-3 text-base-content items-center\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
if r.Icon != nil { if r.Icon != nil {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<span class=\"sidebar-icon shrink-0 flex items-center justify-center [&>svg]:w-5 [&>svg]:h-5\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<span class=\"sidebar-icon flex items-center justify-center\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -60,38 +60,17 @@ func Sidebar(routes []NavRoutes) 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, 5, "</span> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</span>")
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, "<span class=\"sidebar-label truncate\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</a></li>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(r.Name)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `pkg/web/components/sidebar.templ`, Line: 19, Col: 52}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span></a></li>")
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, "</ul></nav><div class=\"border-t border-base-300 p-2 shrink-0\"><button type=\"button\" class=\"sidebar-toggle btn btn-ghost btn-sm w-full justify-start text-base-content/80 hover:text-base-content hover:bg-base-200 rounded-lg flex items-center gap-3\" onclick=\"toggleSidebar()\" aria-label=\"Collapse sidebar\"><span class=\"sidebar-icon shrink-0\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</ul></nav></aside>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = IconCollapse().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</span> <span class=\"sidebar-label\">Collapse</span></button></div></aside>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }