Drawers

Drawers — это панели, которые выдвигаются с одной из сторон экрана и используются для отображения дополнительного контента, навигации или настроек без необходимости перехода на другую страницу. В SvelteKit они обычно реализуются через UI библиотеки, такие как Svelte Material UI, Skeleton UI или Flowbite Svelte, обеспечивая гибкую интеграцию с реактивностью и состоянием приложения.

Основные концепции

Состояние открытия

Управление Drawer осуществляется через булевую переменную состояния. Например, в Svelte:

<script>
  let isOpen = false;
</script>

<button on:click={() => isOpen = true}>Открыть Drawer</button>

Контейнер Drawer

Drawer обычно представляет собой отдельный компонент, который принимает состояние open и колбэки для закрытия:

<Drawer bind:open={isOpen}>
  <h2>Меню</h2>
  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ul>
</Drawer>

Большинство UI библиотек поддерживают два типа Drawer:

Temporary (временные) — закрываются автоматически при взаимодействии с фоном или элементами.
Persistent (постоянные) — остаются открытыми, пока не будет явно вызвано закрытие.

Позиционирование и анимация

Drawers могут выдвигаться с любой стороны экрана: слева, справа, сверху или снизу. Управление позицией чаще всего задается через проп placement:

<Drawer bind:open={isOpen} placement="right">
  <h2>Настройки</h2>
</Drawer>

Для плавности открытия применяются CSS-транзишны. Многие библиотеки автоматически используют transition: transform 0.3s ease-in-out или аналогичные свойства, но также можно кастомизировать анимацию:

<Drawer bind:open={isOpen} class="transition-transform duration-500">
  <h2>Навигация</h2>
</Drawer>

Интеграция с фоном

Часто Drawer сопровождается полупрозрачным фоном (overlay), который блокирует взаимодействие с основной страницей. В SvelteKit это реализуется через условный рендеринг:

{#if isOpen}
  <div class="overlay" on:click={() => isOpen = false}></div>
{/if}
<Drawer bind:open={isOpen}>
  <h2>Меню</h2>
</Drawer>

Класс .overlay можно стилизовать как:

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 10;
}

Drawer с динамическим контентом

Drawer поддерживает вставку любых компонентов и реактивных данных. Пример динамического списка:

<script>
  let items = ["Главная", "Профиль", "Настройки"];
</script>

<Drawer bind:open={isOpen}>
  <ul>
    {#each items as item}
      <li>{item}</li>
    {/each}
  </ul>
</Drawer>

Это позволяет использовать Drawer для меню, фильтров, форм и других интерактивных элементов.

Управление фокусом и доступность

Drawer должен быть доступным для пользователей с клавиатурой и скринридерами:

При открытии фокус можно переводить на первый интерактивный элемент внутри Drawer.
Клавиша Esc закрывает Drawer:

<div
  on:keydown={(e) => e.key === 'Escape' && (isOpen = false)}
  tabindex="0">
  <Drawer bind:open={isOpen}>
    <button>Закрыть</button>
  </Drawer>
</div>

Добавление aria-modal="true" и role="dialog" повышает доступность:

<Drawer bind:open={isOpen} aria-modal="true" role="dialog">
  <h2>Меню навигации</h2>
</Drawer>

Множественные Drawers и вложенность

SvelteKit UI позволяет открывать несколько Drawer одновременно, но важно правильно управлять слоями (z-index) и состоянием, чтобы не возникало конфликта:

<Drawer bind:open={isSettingsOpen} placement="right">
  <SettingsPanel />
</Drawer>

<Drawer bind:open={isMenuOpen} placement="left">
  <MenuPanel />
</Drawer>

При этом для overlay можно использовать разные уровни прозрачности, чтобы визуально разграничить панели.

Настройка стилей

Ширина и высота: большинство библиотек позволяет задавать через пропсы width, height или CSS-классы.
Цветовая схема: Drawer наследует стили темы приложения или можно задать кастомные классы.
Анимация: с помощью Svelte transitions (fade, slide, fly) можно создавать уникальные эффекты.

Пример с Svelte slide:

<script>
  import { slide } from 'svelte/transition';
</script>

<Drawer bind:open={isOpen} transition:slide={{ duration: 400 }}>
  <h2>Фильтры</h2>
</Drawer>