Урок 08. Домашнее задание: шапка приложения

📁 Раздел: Раскладка ⏱️ Время изучения: ~50 мин 🎯 Сложность: Средняя

⚡ Кратко

Собрать шапку приложения на flex: логотип, меню, поиск, действия и аватар. Адаптировать её под узкий экран без медиазапросов, где это возможно.

Задание

В проекте курса сверстайте шапку по требованиям:

  • слева логотип и название (не сжимаются);
  • по центру поле поиска, занимающее всё свободное место;
  • справа кнопка «Создать», значок уведомлений и аватар;
  • на экранах уже 640px меню скрывается, поиск остаётся;
  • у всех интерактивных элементов виден фокус.

Подготовка окружения

cd tailwind-course
npm run dev

Пошаговое решение

Шаг 1. Каркас строки

flex items-center gap-4 border-b border-slate-200 px-4 py-3. Все три группы будут прямыми детьми этой строки.

Шаг 2. Левая группа

flex shrink-0 items-center gap-2. Логотип — квадрат size-7 rounded, название — text-sm font-semibold.

Шаг 3. Поиск

Поле получает flex-1, минимальную ширину и стили фокуса. На мобильном оно останется, а меню спрячется через hidden sm:flex.

Шаг 4. Правая группа

flex shrink-0 items-center gap-2: кнопка, значок, аватар. Значок — кнопка с aria-label, потому что внутри только символ.

Как проверить

  • При сужении окна поле поиска сжимается, а логотип и аватар — нет.
  • Длинное название не ломает строку.
  • Клавиша Tab обходит поиск и все кнопки, фокус виден.
  • На 320px нет горизонтальной прокрутки.

Ориентир

<header class="flex items-center gap-4 rounded-lg border border-slate-200 bg-white px-4 py-3">
  <div class="flex shrink-0 items-center gap-2">
    <div class="size-7 rounded bg-slate-900"></div>
    <span class="hidden text-sm font-semibold text-slate-900 sm:block">Панель</span>
  </div>
  <input class="min-w-32 flex-1 rounded-md border border-slate-300 px-3 py-1.5 text-sm placeholder:text-slate-400
                focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none"
         placeholder="Поиск">
  <div class="flex shrink-0 items-center gap-2">
    <button class="hidden rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white sm:block">Создать</button>
    <button class="rounded-md p-2 text-slate-500 hover:bg-slate-100 focus-visible:outline-2 focus-visible:outline-sky-500" aria-label="Уведомления">🔔</button>
    <div class="size-8 rounded-full bg-slate-300"></div>
  </div>
</header>