107 lines
2.3 KiB
Plaintext
107 lines
2.3 KiB
Plaintext
package components
|
|
|
|
templ Layout(props LayoutProps) {
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-theme="corporate">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>{ props.Title }</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<meta name="description" content={ props.Description }/>
|
|
@Head(props.Head)
|
|
</head>
|
|
<body class="min-h-screen bg-base-200 text-base-content flex flex-col">
|
|
@Header(props.Header)
|
|
|
|
<div class="flex flex-1 min-h-0">
|
|
@Sidebar(props.Routes)
|
|
<main class="flex-1 p-4 bg-base-100 min-h-0 overflow-auto">
|
|
{ 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>
|
|
}
|
|
|
|
type LayoutProps struct {
|
|
Title string
|
|
Description string
|
|
Head HeadProps
|
|
Header HeaderProps
|
|
Routes []NavRoutes
|
|
}
|
|
type NavRoutes struct {
|
|
Name string
|
|
Path string
|
|
Icon templ.Component
|
|
}
|
|
|
|
templ Head(props HeadProps) {
|
|
for _, link := range props.Links {
|
|
<link href={ link.Href } rel={ link.Rel } as={ link.As }/>
|
|
}
|
|
for _, script := range props.Scripts {
|
|
<script src={ script.Src } defer={ script.Defer }></script>
|
|
}
|
|
}
|
|
|
|
type HeadProps struct {
|
|
Links []Link
|
|
Scripts []Script
|
|
}
|
|
|
|
type Link struct {
|
|
Href string
|
|
Rel string
|
|
As string
|
|
}
|
|
|
|
type Script struct {
|
|
Src string
|
|
Defer bool
|
|
}
|
|
|
|
templ Header(props HeaderProps) {
|
|
<header class="navbar bg-primary text-primary-content px-6">
|
|
<div class="navbar-start">
|
|
<span class="font-semibold mr-5">{ props.Title }</span>
|
|
</div>
|
|
<div class="navbar-center">
|
|
if props.NavbarCenter != nil {
|
|
@props.NavbarCenter
|
|
}
|
|
</div>
|
|
<div class="navbar-end">
|
|
if props.NavbarEnd != nil {
|
|
@props.NavbarEnd
|
|
}
|
|
</div>
|
|
</header>
|
|
}
|
|
|
|
type HeaderProps struct {
|
|
Title string
|
|
NavbarStart templ.Component
|
|
NavbarCenter templ.Component
|
|
NavbarEnd templ.Component
|
|
}
|