ploush/mcServerWebsite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

menu mobile
All checks were successful
Build & Deploy / Validation, build et push (push) Successful in 9m27s
Details

Browse source
This commit is contained in:
Ploush 2026-06-10 17:55:39 +02:00
parent a302812e84
commit 7fb5a901ad
3 changed files with 128 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/controllers/header-mobile_controller.js Normal file
View file

@ -0,0 +1,16 @@
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['menu'];
toggle() {
this.menuTarget.classList.toggle('open');
this.element.querySelector('.hamburger').classList.toggle('open');
}
// Fermer le menu quand on clique sur un lien
close() {
this.menuTarget.classList.remove('open');
this.element.querySelector('.hamburger').classList.remove('open');
}
}

92
app/assets/styles/partials/header.css
View file

@ -348,11 +348,97 @@ header .header-dropdown .dropdown-link::after { display: none !important; }
border-color: rgba(255, 255, 255, 0.5);
}
/* ── MOBILE ────────────────────────────────────────────────────── */
/* ── HAMBURGER (MOBILE) ────────────────────────────────────────── */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 0;
width: 28px;
height: 24px;
margin: 0 0.5rem;
}
.hamburger span {
display: block;
width: 100%;
height: 2.5px;
background: var(--text-light);
border-radius: 2px;
transition: all var(--duration-normal) ease;
}
[data-theme="dark"] .hamburger span {
background: var(--text-dark);
}
/* Animation : croix quand ouvert */
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
/* ── MOBILE : transformer nav en panneau ────────────────────────── */
@media (max-width: 640px) {
header nav { display: none !important; }
.hamburger {
display: flex;
}
header nav {
position: fixed;
top: 72px;
left: -100%;
width: 100%;
height: calc(100vh - 72px);
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(var(--blur-md));
-webkit-backdrop-filter: blur(var(--blur-md));
border-top: 1px solid var(--border-light);
flex-direction: column !important;
gap: 0.5rem !important;
padding: 2rem 1.5rem !important;
z-index: 99;
transition: left var(--duration-normal) ease;
overflow-y: auto;
}
[data-theme="dark"] header nav {
background: rgba(12, 10, 18, 0.95);
border-top-color: var(--border-dark);
}
header nav.open {
left: 0;
}
header { padding: 0 1rem !important; }
.header-left { gap: 0; }
.header-left { gap: 0.5rem; }
/* Adapter les liens pour mobile */
header nav .nav-link {
padding: 0.75rem 1rem !important;
border-radius: 10px !important;
border: 1px solid var(--border-light) !important;
background: transparent !important;
font-size: 0.95rem !important;
display: block;
}
[data-theme="dark"] header nav .nav-link {
border-color: var(--border-dark) !important;
}
header nav .nav-link:hover {
background: rgba(0, 0, 0, 0.05) !important;
}
[data-theme="dark"] header nav .nav-link:hover {
background: rgba(255, 255, 255, 0.07) !important;
}
}
/* ── MESSAGE D'ERREUR DANS LE DROPDOWN ─────────────────────────── */

29
app/templates/partials/_header.html.twig
View file

@ -5,35 +5,50 @@
{% set current_route = app.request.attributes.get('_route') %}
<header>
<header data-controller="header-mobile">
{# ── Gauche : Logo + Navigation ───────────────────────────── #}
<div class="header-left">
<button class="hamburger" data-action="click->header-mobile#toggle" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
<a href="{{ path('app_accueil') }}" class="logo">
<img src="{{ asset('images/logo/logo-light.svg') }}" alt="Logo" class="logo-light">
<img src="{{ asset('images/logo/logo-dark.svg') }}" alt="Logo" class="logo-dark">
</a>
<nav>
<nav data-header-mobile-target="menu">
<a href="{{ path('app_accueil') }}"
class="nav-link {{ current_route == 'app_accueil' ? 'active' }}">
class="nav-link {{ current_route == 'app_accueil' ? 'active' }}"
data-action="click->header-mobile#close"
>
Accueil
</a>
<a href="{{ path('app_modpack') }}"
class="nav-link {{ current_route == 'app_modpack' ? 'active' }}">
class="nav-link {{ current_route == 'app_modpack' ? 'active' }}"
data-action="click->header-mobile#close"
>
Modpack
</a>
<a href="{{ path('app_accueil') }}"
class="nav-link {{ current_route == 'app_home' ? 'active' }}">
class="nav-link {{ current_route == 'app_home' ? 'active' }}"
data-action="click->header-mobile#close"
>
Statistiques
</a>
<a href="{{ path('app_accueil') }}"
class="nav-link {{ current_route == 'app_home' ? 'active' }}">
class="nav-link {{ current_route == 'app_home' ? 'active' }}"
data-action="click->header-mobile#close"
>
Actualité
</a>
<a href="{{ path('app_maps') }}"
class="nav-link {{ current_route == 'app_maps' ? 'active' }}">
class="nav-link {{ current_route == 'app_maps' ? 'active' }}"
data-action="click->header-mobile#close"
>
Maps
</a>
</nav>