AppShell

ナビゲーション定義を渡すだけのアプリ枠。

アプリ全体の外枠です。groups にナビゲーションを配列で渡すだけで、折りたためるサイドバー（または狭い画面向けのヘッダー）が組み上がります。Sidebar を自分で組む代わりに使ってください。

export const client = "only";

import { AppShell } from "@squadbase/vantage/components";
import { Button } from "@squadbase/vantage/ui";
import { LayoutDashboard, Table2, Settings } from "lucide-react";

const groups = [
  {
    label: "分析",
    items: [
      { label: "概要", href: "/", icon: LayoutDashboard, isActive: true },
      { label: "売上", href: "/sales", icon: Table2, badge: "12" },
    ],
  },
  {
    label: "管理",
    items: [{ label: "設定", href: "/settings", icon: Settings }],
  },
];

export default function Example() {
  // AppShell の中のサイドバーは position: fixed です。ビューポート全体を占めるのが
  // 本来の使い方なので、プレビューでも枠で囲まずそのまま置いています。
  return (
    <AppShell
      groups={groups}
      actions={<Button size="sm" variant="outline">エクスポート</Button>}
      onNavigate={() => {}}
    >
      <div className="w-[34rem] p-6 text-sm text-muted-foreground">ここにページの中身が入ります。</div>
    </AppShell>
  );
}

import { AppShell } from "@squadbase/vantage/components";
import type { NavGroup, NavItem } from "@squadbase/vantage/components";

PropType

groups?NavGroup[]

ナビゲーション。`{ label?, items: NavItem[] }` の配列。

TypeNavGroup[]

variant?"sidebar" | "header"

サイドバー枠か、セレクト式のヘッダー枠か。

Type"sidebar" | "header"

Default"sidebar"

actions?ReactNode

上部右端に置く要素。

TypeReactNode

header?ReactNode

既定のヘッダーを丸ごと差し替える。

TypeReactNode

defaultOpen?boolean

`variant="sidebar"` のとき、初期状態で開いているか。

Typeboolean

Defaulttrue

linkComponent?ElementType

項目を描くリンクコンポーネント。

TypeElementType

onNavigate?(href: string) => void

項目が選ばれたとき。既定では `location.assign`。

Type(href: string) => void

NavItem

interface NavItem {
  label: string;
  href: string;
  icon?: ComponentType<{ className?: string }>;
  isActive?: boolean;
  disabled?: boolean;
  badge?: string;
  children?: NavItem[]; // 折りたたむサブ項目
}

children を持つ項目は、開閉するサブメニューになります。

ルーターと繋ぐ

クライアントサイド遷移にしたいときは onNavigate を渡します。

import { useNavigate } from "@squadbase/vantage/router";

const navigate = useNavigate();

<AppShell groups={groups} onNavigate={(href) => navigate({ to: href })}>
  {children}
</AppShell>;

現在地の強調は isActive で指定します — ルートのパスと href を突き合わせて立ててください。