Sidebar

折りたためるアプリのサイドバー一式。

アプリ全体のナビゲーションを組むための、20 以上のパーツからなるキットです。ナビゲーションの 定義を配列で渡すだけで済ませたいなら、これを直接使うより AppShell の方が早く終わります。

import {
  Sidebar,
  SidebarProvider,
  SidebarInset,
  SidebarTrigger,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarGroupAction,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarSeparator,
  SidebarInput,
  SidebarRail,
  useSidebar,
} from "@squadbase/vantage/ui";

骨組み

SidebarProvider が開閉の状態を持ち、Sidebar と SidebarInset（本文側）がその中に並びます。

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Acme Analytics</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>分析</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive>概要</SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton>売上</SidebarMenuButton>
              <SidebarMenuBadge>12</SidebarMenuBadge>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarRail />
  </Sidebar>

  <SidebarInset>
    <SidebarTrigger />
    {children}
  </SidebarInset>
</SidebarProvider>

覚えておくと効くもの

リンクにする

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

<SidebarMenuButton render={<Link to="/sales" />}>売上</SidebarMenuButton>;