Sidebar

Адаптивна бічна навігація з desktop collapse та mobile focus trap.

API

Props

Назва	Тип	Типово	Опис
`storageKey`	`string`	`undefined`	Ключ localStorage, під яким стан згортання живе між сесіями. Читається в onMounted — як у UiResizablePanels, щоб не розійшлися server і client рендери. Недоступне сховище (private mode) мовчки пропускає персистентність.
`side`	leftright	`"left"`	З якого боку екрана панель.
`width`	`string`	`"17rem"`	Ширина розгорнутої панелі, будь-яка CSS-величина.
`collapsedWidth`	`string`	`"4.5rem"`	Ширина згорнутої панелі, будь-яка CSS-величина.
`ariaLabel`	`string`	`"Бічна навігація"`	Доступна назва панелі — вона є орієнтиром `navigation` на сторінці.
`initialFocus`	`string`	`undefined`	CSS-селектор усередині панелі, якому віддати фокус при відкритті на мобільному. Типово фокус отримує кнопка закриття, а без неї — сама панель: автофокус в інпуті піднімає клавіатуру.
`sidebarId`	`string`	—	Стабільний id шару в стеку оверлеїв. Задавати не обов'язково: без нього генерується автоматично.
`modelValue`	`boolean`	`false`	Відкрито на мобільному. На десктопі панель видима завжди. Використовуйте через `v-model`.
`collapsed`	`boolean`	`false`	Згорнуто до вузької смуги з іконками. Лише десктоп. Використовуйте через `v-model:collapsed`.
`collapsible`	`boolean`	`true`	Показувати кнопку згортання. Вимкніть, якщо ширина панелі фіксована дизайном.

Події

Назва	Payload	Опис
`update:modelValue`	`[value: boolean]`	Мобільну панель відкрито або закрито.
`update:collapsed`	`[value: boolean]`	Desktop-панель згорнуто або розгорнуто — змінено користувачем або прочитано зі сховища.
`close`	`[]`	Мобільну панель закрито.

Слоти

Назва	Опис
`header`	—
`default`	—
`footer`	—

Доступно через ref

Назва	Тип	Опис
`close`	`() => void`	—
`toggleCollapsed`	`() => void`	—

Персистентність стану згортання

Передайте storage-key, і стан collapsed житиме між сесіями — той самий принцип, що й у UiResizablePanels. Значення читається при монтуванні (щоб не розійшлися server і client рендери) і записується при кожній зміні. Сховище недоступне (private mode) — персистентність мовчки вимикається, стан працює в межах сторінки.

Коли використовувати

Для постійної навігації dashboard, admin або складного продукту. На desktop панель бере участь у layout і може згортатися; на mobile відкривається поверх контенту.

Коли НЕ використовувати

Не використовуйте для тимчасової форми або деталей сутності — це сценарій UiDrawer. На простому сайті з трьома посиланнями достатньо звичайного nav.

Доступність

На mobile панель отримує роль dialog, блокує прокрутку фону, утримує фокус і закривається через Escape незалежно від того, де зараз фокус. Фокус при відкритті отримує кнопка закриття (або елемент з initial-focus) — не сам контейнер, тож Tab починається з реальної дії, а не з панелі. На desktop залишається звичайним aside landmark. Кнопка collapse оголошує поточний стан через aria-expanded, а її шеврон вказує в бік, куди панель згорнеться.

Деталі реалізації

Компонент бере шар зі спільного стеку оверлеїв, тож UiModal, відкритий із сайдбару, завжди поверх. prefers-reduced-motion вимикає анімацію панелі й блюр фону — тривалість Transition задана явно, бо вона керує двома дітьми (backdrop + панель). Невидима зона дотику кнопок шапки — 45×45 через pointer-coarse:after:. Логіка сховища живе в app/utils/uiSidebar.ts — тестується без рендеру.