From c14507a7162815e6a01f1d9d255f9b61db749056 Mon Sep 17 00:00:00 2001 From: Ploush Date: Wed, 25 Mar 2026 23:39:39 +0100 Subject: [PATCH] ajout dropdown de deconnection --- ...oller.js => header_dropdown_controller.js} | 0 assets/styles/app.css | 4 +- assets/styles/partials/header.css | 97 ++++++++++++++++--- config/routes/routing.controllers.yaml | 6 ++ src/EventSubscriber/TwigGlobalSubscriber.php | 40 ++++++++ templates/partials/_header.html.twig | 6 +- templates/partials/_logout_dropdown.html.twig | 62 ++++++++++++ 7 files changed, 199 insertions(+), 16 deletions(-) rename assets/controllers/{login_dropdown_controller.js => header_dropdown_controller.js} (100%) create mode 100644 config/routes/routing.controllers.yaml create mode 100644 src/EventSubscriber/TwigGlobalSubscriber.php create mode 100644 templates/partials/_logout_dropdown.html.twig diff --git a/assets/controllers/login_dropdown_controller.js b/assets/controllers/header_dropdown_controller.js similarity index 100% rename from assets/controllers/login_dropdown_controller.js rename to assets/controllers/header_dropdown_controller.js diff --git a/assets/styles/app.css b/assets/styles/app.css index de805c5..439ba3a 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -13,6 +13,8 @@ /* Backgrounds de navigation */ --nav-bg-light: rgba(255, 255, 255, 0.5); --nav-bg-dark: rgba(12, 10, 18, 0.4); + --nav-bg-light-so: rgba(255, 255, 255, 0.82); + --nav-bg-dark-so: rgba(12, 10, 18, 0.8); /* Couleurs de texte */ --text-light: #1a1625; @@ -30,7 +32,7 @@ /* Effets de blur */ --blur-sm: 8px; - --blur-md: 20px; + --blur-md: 25px; /* Durées de transition */ --duration-fast: 0.15s; /* Transforms rapides */ diff --git a/assets/styles/partials/header.css b/assets/styles/partials/header.css index a2d9249..d3f4885 100644 --- a/assets/styles/partials/header.css +++ b/assets/styles/partials/header.css @@ -73,13 +73,7 @@ header nav { flex-wrap: nowrap; } -/* ── LIENS DE NAVIGATION — style calqué sur .login-btn ─────────── */ -/* - "all: unset" neutralise Bootstrap 5 entièrement sur .nav-link, - puis on réapplique exactement ce qu'on veut. - Les !important sur padding/border/background garantissent - qu'aucune règle Bootstrap résiduelle ne peut l'écraser. -*/ +/* ── LIENS DE NAVIGATION ───────────────────────────────────────── */ header nav .nav-link { all: unset; @@ -90,7 +84,7 @@ header nav .nav-link { cursor: pointer; text-decoration: none !important; - /* Dimensions — identiques au .login-btn */ + /* Dimensions */ padding: 0.55rem 1.1rem !important; border-radius: 10px !important; border: 1px solid var(--border-light) !important; @@ -153,6 +147,80 @@ header nav .nav-link.active:hover { header nav .nav-link::before, header nav .nav-link::after { display: none !important; } +/* ── LIENS DROPDOWN ─────────── */ +header .header-dropdown .dropdown-link { + all: unset; + + display: inline-flex !important; + align-items: center !important; + gap: 0.45rem; + white-space: nowrap; + cursor: pointer; + text-decoration: none !important; + + /* Dimensions */ + padding: 0.55rem 1.1rem !important; + border-radius: 10px !important; + border: 1px solid var(--border-light) !important; + background: transparent !important; + + /* Typographie */ + font-family: 'Syne', sans-serif !important; + font-weight: 600 !important; + font-size: 0.875rem !important; + letter-spacing: 0.03em !important; + text-transform: uppercase !important; + color: var(--muted-light) !important; + + transition: + color var(--duration-normal) ease, + background var(--duration-normal) ease, + border-color var(--duration-normal) ease, + box-shadow var(--duration-normal) ease, + transform var(--duration-fast) ease !important; +} + +[data-theme="dark"] header .header-dropdown .dropdown-link { + border-color: var(--border-dark) !important; + color: var(--muted-dark) !important; +} + +/* Hover */ +header .header-dropdown .dropdown-link:hover { + color: var(--violet) !important; + background: rgba(0, 0, 0, 0.05) !important; + border-color: rgba(0, 0, 0, 0.15) !important; + transform: translateY(-1px) !important; + box-shadow: none !important; +} +[data-theme="dark"] header .header-dropdown .dropdown-link:hover { + color: var(--violet-light) !important; + background: rgba(255, 255, 255, 0.07) !important; + border-color: rgba(255, 255, 255, 0.15) !important; +} + +/* Actif — fond violet léger + bordure violet */ +header .header-dropdown .dropdown-link.active { + color: var(--violet) !important; + background: var(--pill-bg-light) !important; + border-color: rgba(124, 58, 237, 0.30) !important; + font-weight: 700 !important; +} +[data-theme="dark"] header .header-dropdown .dropdown-link.active { + color: var(--violet-light) !important; + background: var(--pill-bg-dark) !important; + border-color: rgba(167, 139, 250, 0.30) !important; +} + +/* Actif + hover — glow subtil */ +header .header-dropdown .dropdown-link.active:hover { + box-shadow: 0 4px 16px rgba(124, 58, 237, 0.20) !important; +} + +/* Pas de pseudo-élément soulignement */ +header .header-dropdown .dropdown-link::before, +header .header-dropdown .dropdown-link::after { display: none !important; } + /* ── ACTIONS (droite) ──────────────────────────────────────────── */ .header-actions { display: flex; @@ -223,14 +291,15 @@ header nav .nav-link::after { display: none !important; } } /* ── DROPDOWN CONNEXION ────────────────────────────────────────── */ -.login-wrapper { position: relative; } +.header-wrapper { position: relative; } -.login-dropdown { +.header-dropdown { + z-index: 100; position: absolute; top: calc(100% + 10px); right: 0; width: 260px; - background: var(--nav-bg-light); + background: var(--nav-bg-light-so); backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); border: 1px solid var(--border-light); @@ -242,12 +311,12 @@ header nav .nav-link::after { display: none !important; } gap: 0.75rem; animation: dropdown-in var(--duration-normal) ease; } -[data-theme="dark"] .login-dropdown { - background: var(--nav-bg-dark); +[data-theme="dark"] .header-dropdown { + background: var(--nav-bg-dark-so); border-color: var(--border-dark); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } -.login-dropdown.open { display: flex; } +.header-dropdown.open { display: flex; } @keyframes dropdown-in { from { opacity: 0; transform: translateY(-6px); } diff --git a/config/routes/routing.controllers.yaml b/config/routes/routing.controllers.yaml new file mode 100644 index 0000000..287059d --- /dev/null +++ b/config/routes/routing.controllers.yaml @@ -0,0 +1,6 @@ +# Load routes from all controllers in src/Controller/ +controllers: + resource: ../../src/Controller/ + type: attribute + + diff --git a/src/EventSubscriber/TwigGlobalSubscriber.php b/src/EventSubscriber/TwigGlobalSubscriber.php new file mode 100644 index 0000000..f3923c3 --- /dev/null +++ b/src/EventSubscriber/TwigGlobalSubscriber.php @@ -0,0 +1,40 @@ +isMainRequest()) { + return; + } + + try { + $this->twig->addGlobal('error', $this->authUtils->getLastAuthenticationError()); + $this->twig->addGlobal('last_username', $this->authUtils->getLastUsername()); + } catch (\LogicException) { + // Route hors pare-feu (assets, profiler...) — on ignore + $this->twig->addGlobal('error', null); + $this->twig->addGlobal('last_username', ''); + } + } + + public static function getSubscribedEvents(): array + { + return [ + KernelEvents::CONTROLLER => 'onKernelController', + ]; + } +} diff --git a/templates/partials/_header.html.twig b/templates/partials/_header.html.twig index 7d15d3f..7c828e0 100644 --- a/templates/partials/_header.html.twig +++ b/templates/partials/_header.html.twig @@ -38,7 +38,11 @@ {# ── Droite : Actions (thème + connexion) ─────────────────── #}
{% include 'partials/_theme_toggle.html.twig' %} - {% include 'partials/_login_dropdown.html.twig' %} + {% if is_granted('ROLE_USER') %} + {% include 'partials/_logout_dropdown.html.twig' %} + {% else %} + {% include 'partials/_login_dropdown.html.twig' %} + {% endif %}
diff --git a/templates/partials/_logout_dropdown.html.twig b/templates/partials/_logout_dropdown.html.twig new file mode 100644 index 0000000..04be712 --- /dev/null +++ b/templates/partials/_logout_dropdown.html.twig @@ -0,0 +1,62 @@ +{# ══════════════════════════════════════════════════════════════ + templates/partials/_login_dropdown.html.twig + Bouton + dropdown formulaire de connexion + ══════════════════════════════════════════════════════════════ #} + +
+ + {# Bouton déclencheur #} + + + {# Dropdown #} + +