Header adaptatif (mobile ou desktop) avec position sticky et ombre portée
// Utilisation dans un layout principal
import Header from '@/components/header/Header';
function RootLayout({ children }) {
return (
<html>
<body>
<Header />
<main>{children}</main>
<footer>...</footer>
</body>
</html>
);
}
// Dans une page Next.js
export default function HomePage() {
return (
<>
<Header />
<section>
<h1>Contenu de la page</h1>
</section>
</>
);
}
// Avec scroll automatique
function ScrollToSection() {
return (
<div>
<Header />
<div style={{ scrollMarginTop: '80px' }}>
Contenu avec compensation pour header sticky
</div>
</div>
);
}
Composant Header principal qui affiche la version mobile ou desktop selon la taille d'écran. Voir la documentation du module ci-dessus pour les détails complets.
Le composant utilise le hook useIsMobile pour détecter automatiquement le type d'appareil et rendre le header approprié. Il maintient une position sticky pour une navigation constante et applique des styles visuels cohérents.