Сайдбар

Боковая навигация: группы, пункты меню, сворачивание, шторка на мобильном.

Варианты и состояния

Оформления

default — пункт без рамки, на фоне панели

outline — пункт карточкой: свой фон и контур

Оформлений самой колонки (floating, inset) больше нет: ширину и фон задаёт AsideHeader кита, а варьируется теперь пункт меню. Свёрнутый режим показывает меню самой витрины — сверните его аккордом Cmd/Ctrl+B.

Состояние загрузки

Высота и заливка плашек заданы пропами кита, а не классами: CSS Gravity сильнее утилит Tailwind — иначе строки приезжают нулевой высоты.

Состояние меню витрины — useSidebar

state: expanded
open: true
isMobile: false

То же делает аккорд Cmd/Ctrl+B и кнопка сворачивания у нижнего края меню: это настоящее меню витрины, и на широком экране выбор сохраняется на всех её страницах и после перезагрузки.

На узком вьюпорте (isMobile: true) меню — модальная шторка: те же действия открывают её, а не меняют ширину колонки, и её состояние никуда не сохраняется.

Токены

--g-color-base-background
--g-color-base-generic
--g-color-base-simple-hover
--g-color-base-brand
--g-color-line-generic
--g-color-line-focus

ширину и раскладку колонки задаёт AsideHeader кита; своего набора цветов у панели больше нет — наведение, полоса активного пункта и кольцо фокуса берут те же токены, что и остальная страница; фон outline-пункта — тот же токен, которым свою карточку красит сам кит

Пример

<SidebarProvider><SidebarLayout aside={<Sidebar />}><SidebarInset /></SidebarLayout></SidebarProvider>