2024-12-05 17:03:42 +01:00
< html >
< head >
< title id = "page_title" > {{ title }}< / title >
{% include 'head.html' %}
< / head >
< body class = "bg-gray-50 text-gray-800 min-h-screen" >
<!-- Main wrapper that will hold the header, sidebar, and content -->
< div class = "flex flex-col min-h-screen" >
< header class = "w-full bg-red-600 text-white flex py-4 shadow-md max-h-20 h-full max-h-20" >
2024-12-06 12:10:30 +01:00
< button id = "menu-toggle" class = "text-2xl focus:outline-none ml-5" onclick = "toggleSidepanel()" >
2024-12-05 17:03:42 +01:00
☰
< / button >
< h1 class = "text-2xl font-bold {% if center is not None and center %} text-center {% else %}ml-5{% endif %} flex-1" id = "page_banner_title" > {{ title }}< / h1 >
< / header >
<!-- Main content container with sidebar and main content -->
< div class = "flex flex-1" >
<!-- Sidebar -->
< div id = "sidepanel" class = "w-0 transition-all duration-250 ease-in-out bg-red-600 shadow-md text-white" >
< ul class = "space-y-2 font-medium" >
< li >
< button href = "#" onclick = "toggleSidepanel()" class = "rounded-lg lg:bg-transparent flex w-full items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-red-100 dark:hover:bg-red-700 group"
hx-get="/" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
>
< span class = "ms-3" > Home< / span >
< / button >
< / li >
< / ul >
< / div >
<!-- Main content -->
< div class = "flex-1 p-4" id = "main_content" >
{{ main_content|safe }}
< / div >
< / div >
< / div >
<!-- Script to toggle the sidebar -->
2024-12-06 12:10:30 +01:00
< script >
2024-12-05 17:03:42 +01:00
function toggleSidepanel() {
2024-12-06 12:10:30 +01:00
const sidepanel = document.getElementById('sidepanel');
2024-12-05 17:03:42 +01:00
if (sidepanel.classList.contains('w-0')) {
sidepanel.classList.remove('w-0');
sidepanel.classList.add('w-60');
sidepanel.classList.add('p-4');
sidepanel.querySelectorAll('button').forEach(button => {
button.classList.add('bg-red-700');
});
} else {
sidepanel.classList.add('w-0');
sidepanel.classList.remove('w-60');
sidepanel.classList.remove('p-4');
sidepanel.querySelectorAll('button').forEach(button => {
button.classList.remove('bg-red-700');
});
}
}
< / script >
< / body >
< / html >
