Навигация и мобильное меню: где я и куда можно пойти

<a class="skip-link" href="#main">К содержанию</a>

<header class="header">
  <a class="header__logo" href="/">Forma</a>

  <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-menu">
    <span class="visually-hidden">Меню</span>
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
      <path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2"/>
    </svg>
  </button>

  <nav class="header__nav" id="site-menu" aria-label="Главное меню">
    <ul>
      <li><a href="/kitchens" aria-current="page">Кухни</a></li>
      <li><a href="/wardrobes">Шкафы</a></li>
      <li><a href="/prices">Цены</a></li>
      <li><a href="/measuring">Замер</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>
</header>

<main id="main">…</main>

.skip-link { position: absolute; left: var(--space-3); top: -3rem; }
.skip-link:focus { top: var(--space-3); }

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  transition: transform var(--duration-base);
}

.header.is-hidden { transform: translateY(-100%); }

/* Текущая страница отмечена не только цветом */
.header__nav [aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

/* Телефон: меню открывается под шапкой, строки по 48px */
@media (max-width: 47.99rem) {
  .header__nav { display: none; flex-basis: 100%; }
  .menu-toggle[aria-expanded="true"] + .header__nav { display: block; }
  .header__nav a { display: flex; align-items: center; min-height: 3rem; }
}

/* Компьютер: меню видно всегда */
@media (min-width: 48rem) {
  .menu-toggle { display: none; }
  .header__nav ul { display: flex; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .header { transition: none; }
}

const toggle = document.querySelector('.menu-toggle');
const header = document.querySelector('.header');
const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';

// Кнопка открывает и закрывает меню и сообщает читалке его состояние
toggle.addEventListener('click', () => {
  toggle.setAttribute('aria-expanded', String(!isOpen()));
});

// Escape закрывает меню и возвращает фокус на кнопку
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && isOpen()) {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.focus();
  }
});

// Шапка прячется при прокрутке вниз и возвращается при прокрутке вверх
let lastY = window.scrollY;
window.addEventListener('scroll', () => {
  const y = window.scrollY;
  header.classList.toggle('is-hidden', y > lastY && y > header.offsetHeight && !isOpen());
  lastY = y;
}, { passive: true });