PathLogs UI
English

Компоненты

AppShell

Оболочка приложения с адаптивным сайдбаром.

Оболочка приложения: на широком экране статичный сайдбар, на узком — выезжающий drawer с шапкой и гамбургером.

Пример

src/app/(app)/layout.tsx
import { AppShell } from "@toimetdev/pathlogs-core";

export default function AppLayout({ children }) {
  return (
    <AppShell
      brand={
        <span className="flex items-center gap-2">
          <Logo />
          <span className="text-sm font-bold">PathLogs</span>
        </span>
      }
      menuLabel="Открыть меню"
      sidebar={<Navigation />}
    >
      {children}
    </AppShell>
  );
}

Содержимое сайдбара приходит пропом целиком — оболочка не диктует, как выглядит навигация.

Адаптивность

Точка перелома — 1024 px. Ниже неё появляются шапка и гамбургер.

Ещё две мелочи, которые обычно забывают:

  • клик по любой ссылке внутри сайдбара закрывает drawer — переход на мобильном всегда означает, что меню больше не нужно;
  • пока drawer открыт, прокрутка страницы под ним заблокирована.

Пропсы

sidebar*ReactNode

Содержимое бокового меню.

children*ReactNode

Содержимое страницы.

brandReactNode

Что показать в мобильной шапке рядом с гамбургером: логотип, название.

menuLabelstring

по умолчанию: "Open menu"

Доступное имя кнопки-гамбургера.

Ширина сайдбара — 15 rem. Если нужна другая, переопределите .pl-shell__sidebar и отступ у .pl-shell__main: оба значения лежат рядом в components.css.