jmarya/azube
jmarya/azube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

htmx single page application + work

Browse source
This commit is contained in:
JMARyA 2024-12-05 17:03:42 +01:00
parent 7a70163e76
commit 73e019de9a
Signed by: jmarya
GPG key ID: 901B2ADDF27C2263
10 changed files with 150 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

67
core/templates/shell.html Normal file
View file

@ -0,0 +1,67 @@
<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">
&#9776;
</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 -->
<script>
const menuToggle = document.getElementById('menu-toggle');
const sidepanel = document.getElementById('sidepanel');
function toggleSidepanel() {
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');
});
}
}
menuToggle.addEventListener('click', () => toggleSidepanel());
</script>
</body>
</html>