Создаем свою собственную Шапку

Поскольку ваш сайт будет просматриваться на разных устройствах, пришло время создать постраничную навигацию, которая сможет реагировать на разные размеры экрана!

Приготовьтесь…

Создать шапку для вашего сайта, которая содержит компонент навигации
Сделать компонент навигации адаптивным

Создайте новый компонент Header. Импортируйте и используйте существующий компонент Navigation.astro внутри элемента <nav>, который находится внутри элемента <header>.
Покажите мне код!
Создайте файл с именем Header.astro в src/components/
src/components/Header.astro
```
---
import Navigation from './Navigation.astro';
---
<header>
  <nav>
    <Navigation />
  </nav>
</header>
```

Попробуйте сами — Обновите ваши страницы

На каждой странице замените ваш существующий компонент <Navigation/> на вашу новую шапку.

Покажите мне код!

---
import Navigation from '../components/Navigation.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = "Home Page";
---
<html lang="en">
  <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>

Проверьте предварительный просмотр в браузере и убедитесь, что ваша шапка отображается на каждой странице. Пока она не выглядит иначе, но если вы проверите предварительный просмотр с помощью инструментов разработчика, вы увидите, что у вас теперь есть элементы, такие как <header> и <nav> вокруг ваших навигационных ссылок.

Добавьте отзывчивые стили

Обновите Navigation.astro классом CSS для управления навигационными ссылками. Оберните существующие навигационные ссылки в <div> с классом nav-links.
src/components/Navigation.astro
```
---
---
<div class="nav-links">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/blog">Blog</a>
</div>
```
Скопируйте приведенные ниже стили CSS в файл global.css. Эти стили:
- Стилизируют и позиционируют навигационные ссылки для мобильных устройств
- Включают класс expanded, который можно переключать для отображения или скрытия ссылок на мобильных устройствах
- Используют @media запрос для определения различных стилей для больших размеров экрана
Начните с определения того, что должно происходить на малых размерах экрана! Маленькие размеры экрана требуют более простых макетов. Затем адаптируйте ваши стили, чтобы учесть более крупные устройства. Если вы сначала спроектируете сложный вариант, потом вам придется потрудиться, чтобы снова сделать его простым.
src/styles/global.css
```
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-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;
  }

}
```

Измените размер окна и посмотрите, какие стили применяются при разной ширине экрана. Теперь ваша шапка адаптивна к размеру экрана с помощью @media запросов.