Créez-le par vous-même - En-tête

Étant donné que votre site sera consulté sur différents appareils, il est temps de créer une navigation de page capable de répondre à plusieurs tailles d’écran !

Préparez-vous à…

Créer un en-tête pour votre site contenant le composant Navigation
Rendre le composant de navigation réactif

Essayer par vous-même - Créer un nouveau composant Header

Créez un nouveau composant Header. Importez et utilisez votre composant Navigation.astro existant à l’intérieur d’un élément <nav> qui se trouve à l’intérieur d’un élément <header>.
Montrez-moi le code !
Créez un fichier nommé Header.astro dans src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Essayer par vous-même - Mettre à jour vos pages

Sur chaque page, remplacez votre composant <Navigation/> existant par votre nouvel en-tête.

Montrez-moi le code !

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Page d'accueil";
---
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
  </head>
  <body>
    <Navigation />
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
  </body>
</html>

Consultez l’aperçu de votre navigateur et vérifiez que votre en-tête est affiché sur chaque page. Il ne sera pas encore différent, mais si vous inspectez votre aperçu à l’aide des outils de développement, vous verrez maintenant des éléments tels que <header> et <nav> autour de vos liens de navigation.

Ajouter des styles réactifs

Mettez à jour Navigation.astro avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise <div> avec la classe nav-links et l’attribut id défini sur main-menu.
src/components/Navigation.astro
```
---
---
<div id="main-menu" class="nav-links">
  <a href="/">Accueil</a>
  <a href="/about/">À propos</a>
  <a href="/blog/">Blog</a>
</div>
```

Copiez les styles CSS ci-dessous dans global.css. Ces styles :

Mettent en forme et positionnent les liens de navigation pour les appareils mobiles
Utilisent une requête @media pour définir des styles différents pour des tailles d’écran plus grandes

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

/* Styles de la navigation */

.nav-links {
  width: 100%;
  display: none;
  margin: 0;
}

.nav-links a {
  display: block;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #0d0950;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #ff9776;
}

@media screen and (min-width: 636px) {
  .nav-links {
    margin-left: 5em;
    display: block;
    position: static;
    width: auto;
    background: none;
  }

  .nav-links a {
    display: inline-block;
    padding: 15px 20px;
  }
}

Redimensionnez votre fenêtre et recherchez les styles différents appliqués à différentes largeurs d’écran. Votre en-tête est maintenant réactif à la taille de l’écran grâce à l’utilisation des requêtes @media.

Liste de contrôle

Je peux utiliser du CSS pour ajouter des éléments réactifs à mon site.

Ressources

Conception basée sur les composants (Anglais) external
Balises HTML sémantiques (Anglais) external
Conception mobile-first (Anglais) external

Contribuer Communauté Parrainer