70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<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>
|