simplified tailwind classes and removed collapsing sidebar make it static
This commit is contained in:
@@ -19,25 +19,6 @@ templ Layout(props LayoutProps) {
|
||||
{ children... }
|
||||
</main>
|
||||
</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>
|
||||
</html>
|
||||
}
|
||||
|
||||
@@ -87,7 +87,7 @@ func Layout(props LayoutProps) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
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 {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -137,7 +137,7 @@ func Head(props HeadProps) templ.Component {
|
||||
var templ_7745c5c3_Var5 templ.SafeURL
|
||||
templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinURLErrs(link.Href)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@@ -150,7 +150,7 @@ func Head(props HeadProps) templ.Component {
|
||||
var templ_7745c5c3_Var6 string
|
||||
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(link.Rel)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@@ -163,7 +163,7 @@ func Head(props HeadProps) templ.Component {
|
||||
var templ_7745c5c3_Var7 string
|
||||
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(link.As)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@@ -182,7 +182,7 @@ func Head(props HeadProps) templ.Component {
|
||||
var templ_7745c5c3_Var8 string
|
||||
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(script.Src)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@@ -195,7 +195,7 @@ func Head(props HeadProps) templ.Component {
|
||||
var templ_7745c5c3_Var9 string
|
||||
templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(script.Defer)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
@@ -254,7 +254,7 @@ func Header(props HeaderProps) templ.Component {
|
||||
var templ_7745c5c3_Var11 string
|
||||
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(props.Title)
|
||||
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))
|
||||
if templ_7745c5c3_Err != nil {
|
||||
|
||||
@@ -3,35 +3,23 @@ package components
|
||||
templ Sidebar(routes []NavRoutes) {
|
||||
<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"
|
||||
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">
|
||||
<ul class="menu menu-vertical w-full p-0 gap-0.5">
|
||||
<nav class="flex-1 overflow-y-auto p-2">
|
||||
<ul class="menu menu-vertical p-0">
|
||||
for _, r := range routes {
|
||||
<li>
|
||||
<a
|
||||
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 {
|
||||
<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>
|
||||
</li>
|
||||
}
|
||||
</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">@IconCollapse()</span>
|
||||
<span class="sidebar-label">Collapse</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ func Sidebar(routes []NavRoutes) templ.Component {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
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 {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -47,12 +47,12 @@ func Sidebar(routes []NavRoutes) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
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 {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
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 {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -60,38 +60,17 @@ func Sidebar(routes []NavRoutes) templ.Component {
|
||||
if templ_7745c5c3_Err != nil {
|
||||
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 {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<span class=\"sidebar-label truncate\">")
|
||||
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>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</a></li>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
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\">")
|
||||
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>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</ul></nav></aside>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user