Sidebar
Layout-контейнер із header, центральним content і footer.
Sidebar — layout-компонент для вертикальної структури з трьома областями: верхнім header, гнучким центральним children і нижнім footer. Компонент не містить власної навігаційної логіки, не фіксується у viewport і не керує маршрутизацією. Навігацію, кнопки та інший вміст передає батьківський застосунок.
Базове використання
<Sidebar
header={<strong>Workspace</strong>}
footer={<span>Signed in as Alex</span>}
minHeight={480}
variant="bordered"
>
<nav aria-label="Workspace navigation">
<a href="/overview">Overview</a>
<a href="/projects">Projects</a>
<a href="/settings">Settings</a>
</nav>
</Sidebar>header, children і footer приймають будь-який ReactNode: текст, HTML-елементи, кнопки, меню, форми або інші компоненти. Кожна область є необов’язковою. Якщо header або footer не передані, відповідна область не рендериться.
Позиція центрального контенту
top— контент притиснутий до верхньої частини центральної області;center— контент по центру;bottom— контент притиснутий до нижньої частини.
Header і footer мають власну висоту, а центральна частина займає весь простір між ними. Якщо контент не поміщається, центральна область прокручується.
<Sidebar
header={<strong>Project</strong>}
footer={<small>v2.4.0</small>}
contentPosition="center"
minHeight={520}
variant="soft"
>
<div>
<button type="button">Overview</button>
<button type="button">Projects</button>
</div>
</Sidebar>Вигляд і розмір
variant підтримує plain, bordered і soft. size змінює внутрішні відступи: sm, default, lg. width і minHeight приймають число в пікселях або CSS-значення. fullHeight={false} вимикає height: 100%, залишаючи тільки minHeight.
plain не додає рамку, bordered додає рамку й заокруглення, а soft використовує м’який фон. Розмір sm використовує відступи 10px, default — 16px, lg — 24px.
<Sidebar width={280} minHeight="100vh" fullHeight>
<WorkspaceMenu />
</Sidebar>
<Sidebar width="min(100%, 420px)" minHeight={240} fullHeight={false}>
<ShortMenu />
</Sidebar>API Reference
| Властивість | Тип | За замовчуванням | Призначення |
|---|---|---|---|
header | ReactNode | — | Вміст верхньої області. |
children | ReactNode | — | Центральний гнучкий вміст. |
footer | ReactNode | — | Вміст нижньої області. |
contentPosition | 'top' | 'center' | 'bottom' | 'top' | Вертикальне вирівнювання центрального вмісту. |
size | 'sm' | 'default' | 'lg' | 'default' | Розмір внутрішніх відступів. |
variant | 'plain' | 'bordered' | 'soft' | 'plain' | Візуальний режим контейнера. |
width | number | string | '100%' | Ширина контейнера; числа конвертуються в px. |
minHeight | number | string | '100%' | Мінімальна висота; числа конвертуються в px. |
fullHeight | boolean | true | Додає контейнеру висоту 100%. |
className | string | — | Додатковий CSS-клас кореневого <aside>. |
style | CSSProperties | — | Inline-стилі та CSS-змінні кореневого елемента. |
id | string | — | Стандартний HTML id. |
aria-* | стандартні ARIA-атрибути | — | Доступна назва та семантика контейнера. |
Компонент приймає стандартні атрибути HTMLElement, крім окремо визначеного children, і рендерить кореневий елемент <aside>. Внутрішні CSS-змінні --mm-sidebar-width і --mm-sidebar-min-height формуються з width та minHeight; за потреби їх можна доповнити через style або власний клас.
Accessibility
Sidebar надає структурний <aside>, але не створює автоматичну назву або навігаційні ролі для переданого вмісту. Для меню використовуйте <nav aria-label="...">, для кнопок — зрозумілі підписи, а для декоративного контенту — відповідні aria-hidden атрибути.