Header de navigation mobile avec menu burger et profil utilisateur
// Utilisation dans un layout mobile
import HeaderMobile from '@/components/header/HeaderMobile';
function MobileLayout({ children }) {
return (
<>
<HeaderMobile />
<main>{children}</main>
</>
);
}
// Dans un composant responsive
const isMobile = useIsMobile();
return (
<>
{isMobile ? <HeaderMobile /> : <HeaderDesktop />}
{children}
</>
);
// Avec gestion d'état personnalisée
function App() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
return (
<HeaderMobile
onMenuToggle={setIsMobileMenuOpen}
isOpen={isMobileMenuOpen}
/>
);
}
Composant HeaderMobile pour la navigation principale sur appareils mobiles. Voir la documentation du module ci-dessus pour les détails complets.
Le composant crée une barre de navigation mobile compacte avec menu burger qui s'adapte automatiquement aux contraintes d'espace des petits écrans. Il gère l'état d'ouverture/fermeture du menu avec animation et fermeture automatique lors de la navigation.