125 lines
5.3 KiB
Twig
125 lines
5.3 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
{% block stylesheets %}
|
|
{{ encore_entry_link_tags('app') }}
|
|
<style>
|
|
#dropdown {
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<nav class="flex justify-between items-center py-4 px-6 shadow-md bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667]">
|
|
<!-- Logo et Titre -->
|
|
<a href="/" class="flex items-center space-x-3">
|
|
<img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-10">
|
|
<h3 class="text-3xl text-white font-bold">Sortie</h3>
|
|
</a>
|
|
|
|
<!-- Navigation principale -->
|
|
<ul class="hidden md:flex space-x-6 text-white font-medium">
|
|
<li>
|
|
<a href="{{ path('home') }}"
|
|
class="{% if app.request.attributes.get('_route') == 'home' %}font-bold underline{% endif %} hover:text-gray-200">
|
|
Accueil
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ path('sortie_list') }}"
|
|
class="{% if app.request.attributes.get('_route') == 'sortie_list' %}font-bold underline{% endif %} hover:text-gray-200">
|
|
Liste des sorties
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="{{ path('participants') }}"
|
|
class="{% if app.request.attributes.get('_route') == 'participants' %}font-bold underline{% endif %} hover:text-gray-200">
|
|
Participants
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Profil utilisateur -->
|
|
<div class="relative">
|
|
{% if app.user %}
|
|
<button id="profile-menu" class="flex items-center space-x-2 focus:outline-none">
|
|
<img src="{{ profile.fileName ? asset('upload/image/profile/' ~ profile.fileName) : asset('upload/image/profile/default.png') }}"
|
|
class="w-10 h-10 rounded-full border-2 border-white">
|
|
<span class="text-white font-medium hidden md:inline">Profil</span>
|
|
</button>
|
|
<!-- Menu déroulant -->
|
|
<div id="dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-md rounded-lg">
|
|
<ul class="py-2 text-gray-700">
|
|
<li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Mon profil</a></li>
|
|
<li><a href="{{ path('dashboard', {'uuid': app.user.idParticipant}) }}" class="block px-4 py-2 hover:bg-gray-100">Dashboard</a></li>
|
|
{% if 'ROLE_ADMIN' in app.user.roles %}
|
|
<li><a href="{{ path('app_admin') }}" class="block px-4 py-2 hover:bg-gray-100">Administration</a></li>
|
|
{% endif %}
|
|
<li><a href="{{ path('app_logout') }}" class="block px-4 py-2 hover:bg-gray-100">Se déconnecter</a></li>
|
|
</ul>
|
|
</div>
|
|
{% else %}
|
|
<div class="space-x-4">
|
|
<a href="{{ path('app_login') }}" class="text-white hover:text-gray-200">Se connecter</a>
|
|
<a href="{{ path('app_register') }}" class="text-white hover:text-gray-200">S'inscrire</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Menu mobile -->
|
|
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Menu mobile (hidden par défaut) -->
|
|
<div id="mobile-menu" class="hidden bg-gradient-to-r from-[#2A8D57] via-[#008167] to-[#1B5667] text-white py-4 md:hidden">
|
|
<ul class="space-y-4 px-6">
|
|
<li><a href="{{ path('home') }}" class="block hover:text-gray-200">Accueil</a></li>
|
|
<li><a href="{{ path('sortie_list') }}" class="block hover:text-gray-200">Liste des sorties</a></li>
|
|
<li><a href="{{ path('participants') }}" class="block hover:text-gray-200">Participants</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
{% block content %}
|
|
{% endblock %}
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
// Toggle menu pour mobile
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Toggle menu déroulant pour le profil
|
|
const profileMenuButton = document.getElementById('profile-menu');
|
|
const dropdown = document.getElementById('dropdown');
|
|
|
|
if (profileMenuButton) {
|
|
profileMenuButton.addEventListener('click', (event) => {
|
|
event.stopPropagation(); // Empêche la fermeture immédiate lorsque le bouton est cliqué
|
|
dropdown.classList.toggle('hidden');
|
|
});
|
|
|
|
// Fermer le menu lorsqu'on clique ailleurs
|
|
document.addEventListener('click', (event) => {
|
|
if (!dropdown.classList.contains('hidden')) {
|
|
const isClickInsideMenu = dropdown.contains(event.target) || profileMenuButton.contains(event.target);
|
|
if (!isClickInsideMenu) {
|
|
dropdown.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|