Baue es selbst - Kopfzeile

Da deine Website auf verschiedenen Geräten angesehen wird, ist es an der Zeit, eine Seitennavigation zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst!

Mach dich bereit, …

Erstelle eine Kopfzeile für deine Website, die die Navigationskomponente enthält
Mache die Navigationskomponente responsiv

Versuche es selbst - Baue eine neue Kopfzeilenkomponente

Erstelle eine neue Kopfzeilenkomponente. Importiere und verwende deine vorhandene Navigation.astro-Komponente innerhalb eines <nav>-Elements, das sich in einem <header>-Element befindet.
Zeige mir den Code!
Erstelle eine Datei namens Header.astro in src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Probier es selbst aus - Aktualisiere deine Seiten

Ersetze auf jeder Seite deine bestehende <Navigation/>-Komponente durch deine neue <Header/>-Komponente.

Zeig mir den 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 = "Startseite";
---
<html lang="de">
  <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>

Überprüfe deine Browser-Vorschau und stelle sicher, dass deine Kopfzeile auf jeder Seite angezeigt wird. Es wird noch nicht anders aussehen, aber wenn du deine Vorschau mit Dev-Tools untersuchst, wirst du sehen, dass du nun Elemente wie <header> und <nav> rund um deine Navigationslinks hast.

Responsive Styles hinzufügen

Aktualisiere Navigation.astro mit der CSS-Klasse, um deine Navigationslinks zu steuern. Umfasse die vorhandenen Navigationslinks mit einem <div> mit der Klasse nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about">Über</a>
  <a href="/blog">Blog</a>
</div>
```

Kopiere die CSS-Styles unten in global.css. Diese Styles:

Stylen und positionieren die Navigationslinks für Mobilgeräte
Beinhalten eine expanded-Klasse, die umgeschaltet werden kann, um die Links auf Mobilgeräten anzuzeigen oder zu verbergen
Verwenden eine @media-Abfrage, um verschiedene Styles für größere Bildschirmgrößen zu definieren

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;
}

/* nav styles */

.nav-links {
  width: 100%;
  top: 5rem;
  left: 48px;
  background-color: #ff9776;
  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;
}

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

.expanded {
  display: unset;
}

@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;
  }

}

Verändere die Fenstergröße und beobachte, wie verschiedene Styles für unterschiedliche Bildschirmbreiten verwendet werden. Deine Kopfzeile ist jetzt responsiv durch die Verwendung von @media-Abfragen.

Checkliste

Ich kann CSS verwenden, um responsive Elemente auf meiner Website hinzuzufügen.