johanleroy/ENI-sortir
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

des trucs

Browse Source
This commit is contained in:
mepiphana2023
2024-11-27 13:16:54 +01:00
parent f607b64239
commit 5a69867774
11 changed files with 447 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
templates/main/header.html.twig
View File

@@ -2,61 +2,123 @@
<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>
<body>
<div class="mx-auto">
<nav class="flex justify-between items-center py-4 shadow-md" style="background-color: #2a8d57;">
<!-- Titre + Logo -->
<a href="/">
<div class="flex items-center space-x-3 pl-4">
<h3 class="text-3xl text-white font-bold">Sortie</h3>
<img src="{{ asset('img/logo.svg') }}" alt="Logo" class="h-10">
<!-- 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>
</a>
<div class="relative">
{% if app.user %}
<div id="menu-button" class="w-full flex justify-center">
<div class="relative">
<img src="{{ profile.fileName ? asset('upload/image/profile/' ~ profile.fileName) : asset('upload/image/profile/default.png') }}"
class="w-16 h-16 rounded-full mr-4" />
</div>
</div>
{% else %}
<button style="height:64px; width: 64px;" id="menu-button" class="p-2 pr-4 text-gray-700 font-bold hover:text-blue-500 focus:outline-none">
<img alt="burger-menu" src="{{ asset('img/burger-menu.svg') }}">
</button>
{% endif %}
<ul id="navbar" class="hidden absolute top-20 right-0 w-max bg-white shadow-md p-4 pl-2 flex-col space-y-4">
{% if app.user %}
<li><a href="{{ path('home') }}" class="text-gray-700 font-bold hover:text-blue-500">Accueil</a></li>
<li><a href="{{ path('sortie_list') }}" class="text-gray-700 font-bold hover:text-blue-500">Liste des sorties</a></li>
<li><a href="{{ path('participants') }}" class="text-gray-700 font-bold hover:text-blue-500">Participants</a></li>
<li><a href="{{ path('profile_view', {'uuid': app.user.idParticipant}) }}" class="text-gray-700 font-bold hover:text-blue-500">Mon profile</a></li>
{% endif %}
{% if app.user and ('ROLE_ADMIN' in app.user.roles) %}
<li><a href="{{ path('app_admin') }}" class="text-gray-700 font-bold hover:text-blue-500">Administration</a></li>
{% endif %}
{% if app.user %}
<li><a href="{{ path('app_logout') }}" class="text-gray-700 font-bold hover:text-blue-500">Se déconnecter</a></li>
{% else %}
<li><a href="{{ path('app_register') }}" class="text-gray-700 font-bold hover:text-blue-500">S'inscrire</a></li>
<li><a href="{{ path('app_login') }}" class="text-gray-700 font-bold hover:text-blue-500">Se connecter</a></li>
{% endif %}
</ul>
</div>
</nav>
{% 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>
</body>
{% block content %}
{% endblock %}
<!-- Scripts -->
<script>
document.getElementById('menu-button').addEventListener('click', function () {
const navbar = document.getElementById('navbar');
navbar.classList.toggle('hidden');
});
</script>
// Toggle menu pour mobile
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
</html>
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>