117 lines
9.7 KiB
HTML
117 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
|
|
<meta charset="UTF-8">
|
|
</head>
|
|
<body>
|
|
<aside id="app-sidebar" th:fragment="sidebar" class="w-64 bg-white border-r border-gray-200 flex flex-col hidden md:flex">
|
|
<div class="h-16 flex items-center px-6 border-b border-gray-200">
|
|
<img src="/images/logo.png" alt="Logo AS Talange" class="h-8 w-8 mr-3 object-contain">
|
|
<h1 class="text-xl font-bold text-blue-600">AS Talange</h1>
|
|
</div>
|
|
<nav class="flex-1 overflow-y-auto py-4 px-3 space-y-1">
|
|
<!-- Menu Principal -->
|
|
<div class="pb-2 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Gestion</div>
|
|
<a href="/" th:classappend="${requestURI == '/' ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Tableau de bord</a>
|
|
<a href="/adherents" th:classappend="${requestURI != null and requestURI.startsWith('/adherents') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Adhérents</a>
|
|
<a sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_AGENT_SAISIE')" href="/admin/pre-inscriptions" th:classappend="${requestURI != null and requestURI.startsWith('/admin/pre-inscriptions') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="flex items-center justify-between px-3 py-2 rounded-lg transition-colors">
|
|
<span>Pré-inscriptions</span>
|
|
<span hx-get="/admin/pre-inscriptions/count" hx-trigger="load, every 30s, refreshBadge from:body" hx-swap="outerHTML"></span>
|
|
</a>
|
|
<a sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_TRESORERIE')" href="/paiements" th:classappend="${requestURI != null and requestURI.startsWith('/paiements') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Paiements</a>
|
|
|
|
<th:block sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_AGENT_SAISIE')">
|
|
<a href="/planning" th:classappend="${requestURI != null and requestURI.startsWith('/planning') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Planning</a>
|
|
</th:block>
|
|
|
|
<th:block sec:authorize="hasRole('ROLE_ADMIN')">
|
|
<!-- Recherches & Exports -->
|
|
<div class="pt-4 pb-2 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Recherches & Exports</div>
|
|
<a href="/admin/licences/recherche" th:classappend="${requestURI != null and requestURI.startsWith('/admin/licences/recherche') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Recherche Licences</a>
|
|
<a href="/admin/equipements/recherche" th:classappend="${requestURI != null and requestURI.startsWith('/admin/equipements/recherche') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Recherche Équipements</a>
|
|
|
|
<!-- Paramétrage -->
|
|
<div class="pt-4 pb-2 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Paramétrage</div>
|
|
<a href="/saisons" th:classappend="${requestURI != null and requestURI.startsWith('/saisons') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Saisons</a>
|
|
<a href="/categories" th:classappend="${requestURI != null and requestURI.startsWith('/categories') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Catégories</a>
|
|
<a href="/equipes" th:classappend="${requestURI != null and requestURI.startsWith('/equipes') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Équipes</a>
|
|
<a href="/educateurs" th:classappend="${requestURI != null and requestURI.startsWith('/educateurs') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Éducateurs</a>
|
|
<a href="/equipements" th:classappend="${requestURI != null and requestURI.equals('/equipements') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Équipements</a>
|
|
<a href="/modespaiement" th:classappend="${requestURI != null and requestURI.startsWith('/modespaiement') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Modes de Paiement</a>
|
|
|
|
<!-- Administration -->
|
|
<div class="pt-4 pb-2 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">Administration</div>
|
|
<a href="/utilisateurs" th:classappend="${requestURI != null and requestURI.startsWith('/utilisateurs') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Utilisateurs</a>
|
|
<a href="/admin/logs/paiements" th:classappend="${requestURI != null and requestURI.startsWith('/admin/logs/paiements') ? 'bg-blue-50 text-blue-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}" class="block px-3 py-2 rounded-lg transition-colors">Logs Paiements</a>
|
|
</th:block>
|
|
</nav>
|
|
<div class="p-4 border-t border-gray-200">
|
|
<div class="text-sm font-medium text-gray-900 mb-1" sec:authentication="name">Admin</div>
|
|
<form th:action="@{/logout}" method="post">
|
|
<button type="submit" class="text-sm text-red-600 hover:text-red-700 font-medium">Déconnexion</button>
|
|
</form>
|
|
<div class="mt-2 text-[10px] text-gray-400">v<span th:text="${appVersion}">1.0-SNAPSHOT</span></div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
function initMobileMenu() {
|
|
const sidebar = document.getElementById('app-sidebar');
|
|
if (!sidebar) return;
|
|
|
|
const header = document.querySelector('header');
|
|
if (header) {
|
|
let mobileBtn = header.querySelector('button.md\\:hidden');
|
|
if (!mobileBtn) {
|
|
mobileBtn = document.createElement('button');
|
|
mobileBtn.className = 'md:hidden text-gray-500 hover:text-gray-700 ml-auto';
|
|
mobileBtn.innerHTML = '<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>';
|
|
header.appendChild(mobileBtn);
|
|
}
|
|
|
|
const newBtn = mobileBtn.cloneNode(true);
|
|
mobileBtn.parentNode.replaceChild(newBtn, mobileBtn);
|
|
|
|
newBtn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
if (sidebar.classList.contains('hidden')) {
|
|
sidebar.classList.remove('hidden');
|
|
sidebar.classList.add('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
|
|
} else {
|
|
sidebar.classList.add('hidden');
|
|
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!window.mobileMenuListenerAdded) {
|
|
document.addEventListener('click', (e) => {
|
|
if (window.innerWidth < 768 && !sidebar.classList.contains('hidden')) {
|
|
if (!sidebar.contains(e.target)) {
|
|
sidebar.classList.add('hidden');
|
|
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
|
|
}
|
|
}
|
|
});
|
|
window.addEventListener('resize', () => {
|
|
if (window.innerWidth >= 768) {
|
|
sidebar.classList.add('hidden');
|
|
sidebar.classList.remove('absolute', 'z-50', 'h-full', 'shadow-2xl', 'left-0', 'top-0');
|
|
}
|
|
});
|
|
window.mobileMenuListenerAdded = true;
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initMobileMenu);
|
|
} else {
|
|
initMobileMenu();
|
|
}
|
|
})();
|
|
</script>
|
|
</aside>
|
|
</body>
|
|
</html>
|