Макет

Мобильный сайдбар

MobileSidebar отображает доступный диалог навигации с затемнением, удержанием и восстановлением фокуса, а также закрытием с клавиатуры на небольших экранах.

Пример

Интерактивный пример

В этом превью мобильную панель можно проверить при любой ширине экрана.

Использование

Импортируйте layout из публичного входа пакета и передайте содержимое вместе с необходимыми настройками компоновки или навигации.

"use client";

import { useCallback, useState } from "react";
import {
  Button,
  MobileSidebar,
  VerticalNavigation,
} from "denjs-ui";

export function Example() {
  const [open, setOpen] = useState(false);
  const close = useCallback(() => setOpen(false), []);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open navigation</Button>
      <MobileSidebar
        open={open}
        onClose={close}
        title="Workspace navigation"
        closeNavigationLabel="Close navigation"
        sidebar={
          <VerticalNavigation
            aria-label="Workspace"
            sections={[
              {
                items: [
                  { label: "Home", href: "/", current: true },
                  { label: "Settings", href: "/settings" },
                ],
              },
            ]}
          />
        }
      />
    </>
  );
}