UI Kit - Headers Travelski

Header Principal

Header Principal avec burger

<header class="header"> <div class="header-container"> <button class="menu-toggle" aria-label="Menu principal" type="button"> <img src="../assets/icons/navigation/burger.svg" alt="Menu" width="24" height="24"> </button> <a href="/" class="logo"> <img src="../assets/icons/travelski/logo.svg" alt="Travelski" width="170" height="37"> </a> </div> </header>

Variantes Header Principal

Header sans burger (logo centré)

<header class="header"> <div class="header-container"> <a href="/" class="logo logo--centered"> <img src="../assets/icons/travelski/logo.svg" alt="Travelski" width="170" height="37"> </a> </div> </header>

Header Secondaire

Header secondaire complet (flèche + croix)

<header class="header-secondary"> <div class="header-secondary-container"> <button class="header-back" aria-label="Retour" type="button"> <img src="../assets/icons/navigation/backward.svg" alt="Retour" width="25" height="24"> </button> <button class="header-close" aria-label="Fermer" type="button"> <img src="../assets/icons/navigation/cross.svg" alt="Fermer" width="33" height="32"> </button> </div> </header>

Variantes Header Secondaire

Variante avec flèche uniquement (à gauche)

<header class="header-secondary header-secondary--back-only"> <div class="header-secondary-container"> <button class="header-back" aria-label="Retour" type="button"> <img src="../assets/icons/navigation/backward.svg" alt="Retour" width="25" height="24"> </button> </div> </header>

Variante avec croix uniquement (à droite)

<header class="header-secondary header-secondary--close-only"> <div class="header-secondary-container"> <button class="header-close" aria-label="Fermer" type="button"> <img src="../assets/icons/navigation/cross.svg" alt="Fermer" width="33" height="32"> </button> </div> </header>

Notes d'Utilisation

📱 Header Principal

Le header principal utilise un fond noir avec les classes :

Structure : .header → .header-container
Burger : .menu-toggle avec icône 24x24px
Logo : .logo avec dimensions 170x37px
Sans burger : Ajouter .logo--centered au logo
Position : position: fixed par défaut (supprimé pour la démo)

✅ Header Secondaire

Le header secondaire est blanc avec des icônes d'action :

Structure : .header-secondary → .header-secondary-container
Arrière-plan : Blanc (#ffffff)
Icône backward : .header-back (25x24px à gauche)
Icône cross : .header-close (33x32px à droite)
Variantes : --back-only ou --close-only

📝 Exemple d'Utilisation Réelle

Header Principal (comme dans template_resa.html) :

                                <!-- Position fixed par défaut -->

                                <header class="header">

                                  <div class="header-container">

                                    <button class="menu-toggle">...</button>

                                    <a class="logo">...</a>

                                  </div>

                                </header>

🚫 À Éviter

Ne pas modifier les dimensions des icônes sans respecter leurs proportions
Ne pas utiliser les icônes en SVG inline pour les headers (préférer img)
Ne pas oublier les attributs aria-label sur les boutons
Ne pas mélanger header principal et secondaire sur la même page
En production, garder position: fixed pour le header principal

UI Kit - Système de Headers Travelski