<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">
<button id="menu-toggle" class="text-2xl focus:outline-none ml-5 -mt-1" onclick="toggleSidepanel()">
☰
</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>
<a 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>
</a>
<a href="/settings" 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="/settings" hx-target="#main_content" hx-push-url="true" hx-swap="innerHTML"
>
<span class="ms-3">Settings</span>
</a>
</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 -->
<script>
function toggleSidepanel() {
const sidepanel = document.getElementById('sidepanel');
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>