Макет

Макет с сайдбаром

SidebarLayout оставляет основную навигацию видимой на десктопе и переключается на доступную мобильную панель на меньших экранах.

Пример

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

DenJS Workspace

Обзор

Обзор пространства

Управляйте проектами, активностью команды и статусом деплоев из одного места.

Активные проекты

Успешные сборки

98.4%

Открытые задачи

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

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

"use client";

import { SidebarLayout, VerticalNavigation } from "denjs-ui";
import { Home, Settings } from "lucide-react";

const sidebar = (
  <VerticalNavigation
    aria-label="Workspace"
    sections={[
      {
        items: [
          {
            label: "Home",
            href: "/",
            icon: <Home aria-hidden="true" />,
            current: true,
          },
          {
            label: "Settings",
            href: "/settings",
            icon: <Settings aria-hidden="true" />,
          },
        ],
      },
    ]}
  />
);

export function Example() {
  return (
    <SidebarLayout
      navbar={<span>Workspace</span>}
      sidebar={sidebar}
      mobileSidebarTitle="Workspace navigation"
    >
      <h1>Dashboard</h1>
    </SidebarLayout>
  );
}