Макет

Макет с верхней навигацией

StackedLayout подходит для дашбордов, где глобальная навигация остаётся сверху, а мобильные пользователи получают те же разделы в выезжающей панели.

Пример

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

DenJS Workspace

Обзор

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

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

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

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

98.4%

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

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

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

"use client";

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

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

const navbar = (
  <Nav
    aria-label="Primary"
    items={[
      { label: "Overview", href: "/", current: true },
      { label: "Projects", href: "/projects" },
    ]}
  />
);

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