saas-sidebar

SaaS 折りたたみ式サイドバー

shadcn/ui Sidebar コンポーネントシステムを使って、洗練された折りたたみ式サイドバーを構築します。アイコンモードでの中央揃え、ホバー時に切り替わる展開ボタン、自動ツールチップ、キーボードショートカット、モバイル Sheet、状態の永続化、ローディングスケルトンなど、あらゆる詳細を網羅しています。

使用する場面

• サイドバーナビゲーションのある SaaS ダッシュボード
• 折りたたみ／最小化可能なサイドバー（アイコンのみのモード）
• モバイル用 Sheet オーバーレイを備えたレスポンシブレイアウト

クイックスタート

npx shadcn@latest add sidebar tooltip avatar popover collapsible separator skeleton sheet

これにより、すべてのサイドバーのプリミティブを含む components/ui/sidebar.tsx（約770行）が生成されます。カスタムの <aside> は作成しないでください。

---

アーキテクチャ

レイアウトの仕組み（2つの div による仕掛け）

デスクトップでは、Sidebar コンポーネントは2つの divをレンダリングします。

┌──────────────────────────────────────────────┐
│ SidebarProvider (flex container, min-h-svh)   │
│                                              │
│  ┌─ Sidebar outer div ──────────────────┐    │
│  │  [Spacer div]     ← reserves width   │    │
│  │   relative w-[--sidebar-width]        │    │
│  │   (pushes SidebarInset right)         │    │
│  │                                       │    │
│  │  [Fixed div]      ← actual sidebar   │    │
│  │   fixed inset-y-0 z-10               │    │
│  │   w-[--sidebar-width]                 │    │
│  │   (contains children)                 │    │
│  └───────────────────────────────────────┘    │
│                                              │
│  ┌─ SidebarInset (main) ────────────────┐    │
│  │  flex-1 overflow-y-auto h-dvh         │    │
│  └───────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

どちらの div も同時に幅が遷移します：transition-[width] duration-200 ease-linear。スペーサーによって、メインコンテンツがサイドバーと重ならないようにしています。

幅の定数（CSS 変数）

SidebarProvider がインラインの CSS カスタムプロパティとして設定します。

状態	変数	値
展開	--sidebar-width	16rem (256px)
折りたたみ	--sidebar-width-icon	3rem (48px)
モバイル	--sidebar-width	18rem (288px)

状態コンテキスト

type SidebarContextProps = {
  state: "expanded" | "collapsed"  // derived from open
  open: boolean                     // true = expanded
  setOpen: (open: boolean) => void
  openMobile: boolean               // separate mobile Sheet state
  setOpenMobile: (open: boolean) => void
  isMobile: boolean                 // < 768px
  toggleSidebar: () => void         // smart: routes to mobile or desktop
}

どこからでも useSidebar() でアクセスできます。collapsed を props として渡さないでください。

データ属性によるスタイル設定（Props のバケツリレーを回避）

外側の Sidebar div がデータ属性を設定し、子要素が Tailwind の group セレクターを介して反応します。

<div data-state="collapsed" data-collapsible="icon" data-variant="sidebar" data-side="left">

主なセレクターとその動作：

/* Force menu buttons to 32×32px centered squares when collapsed */
group-data-[collapsible=icon]:!size-8
group-data-[collapsible=icon]:!p-2

/* Hide text labels smoothly (negative margin pulls up, opacity fades) */
group-data-[collapsible=icon]:-mt-8
group-data-[collapsible=icon]:opacity-0

/* Hard-hide sub-menus, group actions, badges when collapsed */
group-data-[collapsible=icon]:hidden

/* Prevent horizontal scrollbar in 48px-wide collapsed column */
group-data-[collapsible=icon]:overflow-hidden

Peer による連携（Sidebar ↔ メインコンテンツ）

サイドバーの外側の div には group peer が設定されています。SidebarInset は peer セレクターを使用します。

// SidebarInset reacts to sidebar state for inset variant
"md:peer-data-[variant=inset]:m-2"
"md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2"

---

完璧にアイコンを中央揃えする仕組み

ここが最も重要なポイントです。SidebarMenuButton は CVA バリアントを使用します。

const sidebarMenuButtonVariants = cva(
  // Base: flex row, gap-2, overflow-hidden, rounded-md, p-2
  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm " +
  // Auto-truncate the last span (label text)
  "[&>span:last-child]:truncate " +
  // Icons: always 16×16, never shrink
  "[&>svg]:size-4 [&>svg]:shrink-0 " +
  // COLLAPSED: force to 32×32 square with centered icon
  "group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 " +
  // Transitions on width, height, padding (not all)
  "transition-[width,height,padding] " +
  // Active state
  "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium",
  {
    variants: {
      size: {
        default: "h-8 text-sm",                                    // 32px — nav items
        sm: "h-7 text-xs",                                         // 28px — compact
        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",    // 48px — header (workspace switcher)
      },
    },
  }
)

折りたたみ時にすべてが中央揃えになる理由：

• コンテナーの幅は 3rem (48px)、左右の p-2 (各8px) を差し引くと、使用可能な幅は32pxです
• ボタンは !size-8 (32px) と !p-2 (パディング8px) に強制され、アイコンが中央に配置されます
• overflow-hidden によって、まだフェードアウトしていないテキストを切り取ります
• アイコンの [&>svg]:size-4 [&>svg]:shrink-0 によって、常に16×16のサイズになり、圧縮されません

ヘッダーでのサイズ "lg"：

• h-12 (48px) により、2行のテキスト（名前＋サブタイトル）を表示できます
• group-data-[collapsible=icon]:!p-0 によってパディングがなくなり、h-7 w-7 のアバターがすっきり収まります

組み込みのツールチップシステム

SidebarMenuButton には tooltip prop があります。手動でラップする必要はありません。

<SidebarMenuButton asChild isActive={isActive} tooltip="Home">
  <Link href="/"><Home className="h-4 w-4" /><span>Home</span></Link>
</SidebarMenuButton>

内部では、ボタンを <Tooltip> でラップし、表示を自動制御します。

<TooltipContent
  side="right"
  align="center"
  hidden={state !== "collapsed" || isMobile}  // only show when collapsed + desktop
/>

TooltipProvider delayDuration={0} は SidebarProvider レベルで設定されるため、ツールチップがすぐに表示されます。

asChild / Slot パターン

すべてのコンポーネントが asChild（Radix Slot）に対応しています。有効にすると、ラッパーをレンダリングせず、props を子要素にマージします。これにより、次のように記述できます。

// SidebarMenuButton renders as <Link> not <button><Link>
<SidebarMenuButton asChild tooltip="Home">
  <Link href="/">...</Link>
</SidebarMenuButton>

---

展開／折りたたみのパターン

仕組み

折りたたみ時に、サイドバーのどこにホバーしてもヘッダーのアバターが展開ボタンに切り替わります。

Collapsed (idle):    [OrgAvatar]                    ← icon only, 7×7
Collapsed (hover):   [ExpandBtn]                    ← replaces avatar on sidebar hover
Expanded:            [OrgSwitcher ——— CollapseBtn]  ← full row

実装

<Sidebar collapsible="icon" className="border-r group/sidebar">
  <SidebarHeader className="pb-0">
    <SidebarMenu>
      <SidebarMenuItem className="flex items-center gap-1">
        <ExpandButton />           {/* hidden → shows on sidebar hover */}
        <OrgSwitcher />            {/* avatar hides on sidebar hover when collapsed */}
        <CollapseToggle />         {/* early-returns null when collapsed */}
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarHeader>

ExpandButton

function ExpandButton() {
  const { toggleSidebar, state } = useSidebar()
  if (state !== 'collapsed') return null

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          onClick={(e) => { e.stopPropagation(); toggleSidebar() }}
          className="hidden group-hover/sidebar:flex items-center justify-center h-7 w-7 rounded-md bg-accent text-foreground cursor-pointer hover:bg-accent/80 transition-colors shrink-0"
        >
          <PanelLeftOpen className="h-4 w-4" />
        </button>
      </TooltipTrigger>
      <TooltipContent side="right" align="center">Expand sidebar</TooltipContent>
    </Tooltip>
  )
}

主なクラス：

• hidden group-hover/sidebar:flex — デフォルトでは非表示で、サイドバーにホバーすると表示されます
• h-7 w-7 — 組織のアバターと完全に同じサイズで、レイアウトのずれがありません
• e.stopPropagation() — クリックが背後にある PopoverTrigger に伝わるのを防ぎます

CollapseToggle

function CollapseToggle() {
  const { toggleSidebar, state } = useSidebar()
  if (state !== 'expanded') return null

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button
          onClick={toggleSidebar}
          className="h-7 w-7 flex items-center justify-center rounded-md text-muted-foreground/50 hover:text-muted-foreground hover:bg-accent transition-colors cursor-pointer shrink-0"
        >
          <PanelLeftOpen className="h-4 w-4 rotate-180" />
        </button>
      </TooltipTrigger>
      <TooltipContent side="right">Close sidebar</TooltipContent>
    </Tooltip>
  )
}

ポイント：別の PanelLeftClose アイコンではなく、同じ PanelLeftOpen アイコンに rotate-180 を適用します。

組織／チームのアバター（折りたたみ時はホバーで非表示）

<SidebarMenuButton size="lg" className={cn("w-full cursor-pointer", collapsed && "justify-center")}>
  <div className={cn(
    "flex items-center justify-center h-7 w-7 rounded-md bg-primary text-primary-foreground text-xs font-bold shrink-0",
    collapsed && "group-hover/sidebar:hidden"  // ← KEY: hides when sidebar hovered
  )}>
    {initial}
  </div>
  {!collapsed && (
    <>
      <div className="flex-1 min-w-0 text-left">
        <p className="text-sm font-semibold truncate leading-tight">{name}</p>
        <p className="text-[10px] text-muted-foreground leading-tight">{subtitle}</p>
      </div>
      <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
    </>
  )}
</SidebarMenuButton>

注：両方の行に leading-tight を設定すると、h-12（size="lg"）のボタン内にコンパクトに収まります。

---

ナビゲーション項目

標準的なナビゲーション項目

function NavItem({ href, label, icon: Icon, badge, onClick }: {
  href?: string; label: string; icon: ComponentType<{ className?: string }>
  badge?: string; onClick?: () => void
}) {
  const pathname = usePathname()
  const isActive = href ? pathname === href : false

  const content = (
    <>
      <Icon className="h-4 w-4" />
      <span>{label}</span>
      {badge && (
        <span className="ml-auto flex items-center gap-0.5 text-[10px] text-muted-foreground/50">
          <kbd className="inline-flex h-5 items-center rounded border border-border/50 bg-muted/50 px-1 font-mono text-[10px]">⌘</kbd>
          <kbd className="inline-flex h-5 items-center rounded border border-border/50 bg-muted/50 px-1 font-mono text-[10px]">{badge}</kbd>
        </span>
      )}
    </>
  )

  if (onClick) {
    return (
      <SidebarMenuItem>
        <SidebarMenuButton isActive={isActive} tooltip={label} onClick={onClick} className="cursor-pointer">
          {content}
        </SidebarMenuButton>
      </SidebarMenuItem>
    )
  }

  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild isActive={isActive} tooltip={label}>
        <Link href={href!}>{content}</Link>
      </SidebarMenuButton>
    </SidebarMenuItem>
  )
}

折りたたみ時：アイコンは32×32の範囲内で中央に配置され、span は見えない状態に切り詰められ、バッジは非表示になり（overflow-hidden で切り取られます）、ホバー時にツールチップが表示されます。

折りたたみ可能なネストセクション

function CollapsibleSection({ label, icon: Icon, items }: { ... }) {
  const [open, setOpen] = useState(true)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton className="cursor-pointer" tooltip={label}>
            <Icon className="h-4 w-4" />
            <span>{label}</span>
            <ChevronRight className={cn(
              "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground/50 transition-transform duration-200",
              open && "rotate-90"
            )} />
          </SidebarMenuButton>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <SidebarMenuSub>
            {items.map((item) => (
              <SidebarMenuSubItem key={item.id}>
                <SidebarMenuSubButton asChild>
                  <Link href={item.href}><span className="truncate">{item.name}</span></Link>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  )
}

SidebarMenuSub は折りたたみ時に自動で非表示になります：group-data-[collapsible=icon]:hidden。親ボタンは引き続き、アイコンのみのツールチップ付き項目として表示されます。

グループラベル（自動非表示のテクニック）

<SidebarGroup className="py-1">
  <SidebarGroupLabel className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-medium">
    Projects
  </SidebarGroupLabel>
  <SidebarMenu>{/* items */}</SidebarMenu>
</SidebarGroup>

組み込みの自動非表示では、-mt-8 opacity-0（display:noneではありません）を使用します。これにより、ラベルを DOM に残したまま、下の項目を滑らかなtransition-[margin,opacity] duration-200 ease-linearで上に移動させることができ、急なジャンプを防げます。

インラインアクションボタン（ホバー時に表示）

<SidebarMenuItem>
  <SidebarMenuButton asChild tooltip="Projects">
    <Link href="/projects"><FolderOpen className="h-4 w-4" /><span>Projects</span></Link>
  </SidebarMenuButton>
  <SidebarMenuAction showOnHover>
    <Plus className="h-4 w-4" />
  </SidebarMenuAction>
</SidebarMenuItem>

アクションはabsolute right-1で配置し、md:opacity-0 group-hover/menu-item:opacity-100を使用して、ホバー時のみ表示します。折りたたみ時は自動的に非表示になります。

---

フッターウィジェット（折りたたみ ↔ 展開のパターン）

フッター項目は、全コンテンツ表示（展開時）と、中央揃えのアイコン＋ツールチップ（折りたたみ時）との間で、自然に切り替わる必要があります。

パターン：折りたたみ時の早期リターン

function UsageWidget() {
  const { state } = useSidebar()
  const collapsed = state === 'collapsed'

  // Collapsed: centered icon with tooltip
  if (collapsed) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>
          <button className="flex items-center justify-center mx-auto w-8 h-8 cursor-pointer hover:bg-accent/50 rounded-md transition-colors">
            <Gauge className="h-4 w-4 text-muted-foreground" />
          </button>
        </TooltipTrigger>
        <TooltipContent side="right">75% credits used</TooltipContent>
      </Tooltip>
    )
  }

  // Expanded: full widget
  return (
    <div className="mx-2 px-3 py-2 rounded-md hover:bg-accent/50 transition-colors cursor-pointer space-y-1.5">
      <div className="flex items-center justify-between">
        <span className="text-[11px] text-muted-foreground">250 credits left</span>
        <span className="text-[10px] text-muted-foreground/60">75%</span>
      </div>
      <div className="h-1.5 rounded-full bg-muted overflow-hidden">
        <div className="h-full rounded-full bg-primary transition-all duration-300" style={{ width: '75%' }} />
      </div>
    </div>
  )
}

ユーザー行（SidebarMenuButton を使用）

function UserRow() {
  const { state } = useSidebar()
  const collapsed = state === 'collapsed'

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton asChild tooltip={userName} className={cn(collapsed && "flex items-center justify-center")}>
          <Link href="/settings" className="flex items-center gap-2 cursor-pointer">
            <Avatar className="h-6 w-6 shrink-0">
              <AvatarImage src={photo} />
              <AvatarFallback className="text-[10px] bg-muted">{initial}</AvatarFallback>
            </Avatar>
            {!collapsed && (
              <>
                <span className="truncate text-sm font-medium">{userName}</span>
                <Settings className="ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground/50 hover:text-muted-foreground transition-colors" />
              </>
            )}
          </Link>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}

SidebarMenuButton tooltip=を使用すると、折りたたみ時にツールチップが自動表示されます。アバターはh-6 w-6にすることで、折りたたみ時のボタン!size-8内に収まります。

---

組織／チーム切り替え（ヘッダー内のポップオーバー）

重要：PopoverTrigger を Tooltip で囲まないでください — クリック操作が正しく動作しなくなります。

function OrgSwitcher() {
  const { state } = useSidebar()
  const [open, setOpen] = useState(false)
  const collapsed = state === 'collapsed'

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <SidebarMenuButton size="lg" className={cn("w-full cursor-pointer", collapsed && "justify-center")}>
          <div className={cn(
            "flex items-center justify-center h-7 w-7 rounded-md bg-primary text-primary-foreground text-xs font-bold shrink-0",
            collapsed && "group-hover/sidebar:hidden"
          )}>
            {initial}
          </div>
          {!collapsed && (
            <>
              <div className="flex-1 min-w-0 text-left">
                <p className="text-sm font-semibold truncate leading-tight">{orgName}</p>
                <p className="text-[10px] text-muted-foreground leading-tight">{planLabel}</p>
              </div>
              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
            </>
          )}
        </SidebarMenuButton>
      </PopoverTrigger>
      <PopoverContent
        align="start"
        side={collapsed ? 'right' : 'bottom'}
        sideOffset={4}
        className="w-60 p-1"
      >
        {/* Org list items */}
        {orgs.map((org) => (
          <button
            key={org.id}
            onClick={() => switchOrg(org.id)}
            className="flex items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent transition-colors w-full cursor-pointer text-sm"
          >
            <div className="flex items-center justify-center h-6 w-6 rounded bg-primary/10 text-primary text-[10px] font-bold shrink-0">
              {org.name.charAt(0)}
            </div>
            <span className="flex-1 truncate font-medium">{org.name}</span>
            {org.id === active.id && <Check className="h-3.5 w-3.5 shrink-0 text-primary" />}
          </button>
        ))}
        <SidebarSeparator className="my-1" />
        <Link href="/settings" className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer">
          <Settings className="h-3.5 w-3.5" /> Settings
        </Link>
        <button className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors cursor-pointer w-full">
          <Plus className="h-3.5 w-3.5" /> New workspace
        </button>
      </PopoverContent>
    </Popover>
  )
}

サイドバーが折りたたまれている場合、Popover のsideは"right"に切り替わり、狭いサイドバーと重ならないようにします。

---

SidebarRail（端にホバーして切り替え）

<SidebarRail />

サイドバーの-right-4に配置された、幅w-4の透明なクリック領域です。ホバーすると、2pxの縦線（hover:after:bg-sidebar-border）が表示されます。クリックするとサイドバーが切り替わります。ヘッダーボタンと並ぶ補助的な切り替え手段として、ユーザーは自然に見つけられます。

---

モバイルでの動作

自動です。 SidebarコンポーネントはuseIsMobile()（ブレークポイント：768px）を確認し、次のように表示します。

• デスクトップ：折りたたみアニメーション付きのhidden md:block
• モバイル：Radix Sheetオーバーレイ（左からスライドインし、背景オーバーレイを表示）

toggleSidebar()は、適切な動作に振り分けます。

const toggleSidebar = () => isMobile ? setOpenMobile(o => !o) : setOpen(o => !o)

ページヘッダー内のモバイル用トリガー：

<SidebarTrigger className="md:hidden" />  // PanelLeft icon, h-7 w-7

useIsMobileフック：

const MOBILE_BREAKPOINT = 768
export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
  React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])
  return !!isMobile
}

---

キーボードショートカット

SidebarProviderに組み込まれています：⌘B（Mac）／Ctrl+B（Windows）。設定は不要です。toggleSidebar()を呼び出します。

---

状態の永続化

localStorage（マウント時に即時反映）

const SIDEBAR_KEY = 'sidebar_state'

const [open, setOpen] = useState(() => {
  if (typeof window === 'undefined') return true
  const stored = localStorage.getItem(SIDEBAR_KEY)
  return stored === null ? true : stored === 'true'
})

const handleOpenChange = (value: boolean) => {
  setOpen(value)
  localStorage.setItem(SIDEBAR_KEY, String(value))
}

<SidebarProvider open={open} onOpenChange={handleOpenChange}>

Cookie（SSR 用。SidebarProvider が内部で設定）

document.cookie = `sidebar_state=${openState}; path=/; max-age=${60 * 60 * 24 * 7}`

---

ローディングスケルトン（レイアウトシフトなし）

サイドバーの幅と要素のサイズを一致させます。

function SidebarSkeleton() {
  return (
    <div className="flex min-h-screen">
      <div className="w-64 shrink-0 border-r bg-sidebar p-3 space-y-4">
        <div className="flex items-center gap-2">
          <div className="h-7 w-7 rounded-md bg-muted animate-pulse" />
          <div className="flex-1 space-y-1.5">
            <div className="h-3 w-28 rounded bg-muted animate-pulse" />
            <div className="h-2 w-16 rounded bg-muted animate-pulse" />
          </div>
        </div>
        <div className="space-y-1 pt-2">
          {[...Array(5)].map((_, i) => (
            <div key={i} className="h-8 rounded-md bg-muted/50 animate-pulse" />
          ))}
        </div>
      </div>
      <div className="flex-1 flex items-center justify-center">
        <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
      </div>
    </div>
  )
}

---

全体の組み立て

レイアウト（アプリを囲む）

'use client'
import { useState } from 'react'
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
import { AppSidebar } from './app-sidebar'

const SIDEBAR_KEY = 'sidebar_state'

export function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [open, setOpen] = useState(() => {
    if (typeof window === 'undefined') return true
    const stored = localStorage.getItem(SIDEBAR_KEY)
    return stored === null ? true : stored === 'true'
  })

  const handleOpenChange = (value: boolean) => {
    setOpen(value)
    localStorage.setItem(SIDEBAR_KEY, String(value))
  }

  return (
    <SidebarProvider open={open} onOpenChange={handleOpenChange}>
      <AppSidebar />
      <SidebarInset className="overflow-y-auto h-dvh">
        {children}
      </SidebarInset>
    </SidebarProvider>
  )
}

注：モバイルの Safari では、h-screenよりもh-dvh（動的ビューポートの高さ）が適しています。

サイドバー（すべてのセクション）

export function AppSidebar() {
  return (
    <Sidebar collapsible="icon" className="border-r group/sidebar">
      <SidebarHeader className="pb-0">
        <SidebarMenu>
          <SidebarMenuItem className="flex items-center gap-1">
            <ExpandButton />
            <OrgSwitcher />
            <CollapseToggle />
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup className="py-1">
          <SidebarMenu>
            <NavItem href="/dashboard" label="Home" icon={Home} />
            <NavItem label="Search" icon={Search} badge="K" onClick={openSearch} />
          </SidebarMenu>
        </SidebarGroup>

        <SidebarGroup className="py-1">
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            <CollapsibleSection label="Recent" icon={Clock} items={recentItems} />
            <NavItem href="/projects" label="All projects" icon={FolderOpen} />
            <NavItem href="/starred" label="Starred" icon={Star} />
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="gap-0.5 pb-2">
        <SidebarSeparator />
        <UsageWidget />
        <UserRow />
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  )
}

---

CSS 変数（globals.css）

:root {
  --sidebar: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-border: 220 13% 91%;
  --sidebar-accent: 220 14.3% 95.9%;
  --sidebar-accent-foreground: 220.9 39.3% 11%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}
.dark {
  --sidebar: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

Tailwind の設定（theme.extend.colors）：

sidebar: {
  DEFAULT: "hsl(var(--sidebar))",
  foreground: "hsl(var(--sidebar-foreground))",
  border: "hsl(var(--sidebar-border))",
  accent: "hsl(var(--sidebar-accent))",
  "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
  ring: "hsl(var(--sidebar-ring))",
},

---

重要なルール

推奨事項

• アイコンのみの折りたたみには、<Sidebar>にcollapsible="icon"を指定する
• ホバー検出のため、<Sidebar>にgroup/sidebarクラスを指定する
• 状態の取得にはuseSidebar()を使用する — collapsedを props で受け渡さない
• ツールチップの自動表示にはSidebarMenuButton tooltip={label}を使用する
• 折りたたみ時のスタイルにはgroup-data-[collapsible=icon]:セレクターを使用する
• 展開ボタンとアバターのサイズを正確に一致させる（h-7 w-7）
• 展開ボタンにe.stopPropagation()を指定する（ポップオーバーのトリガーを防止）
• 折りたたみにはPanelLeftOpenとrotate-180を使用する（アイコンは2つではなく1つ）
• ヘッダーボタン内の複数行テキストにはleading-tightを指定する
• すべてのアイコンと末尾の要素にshrink-0を指定する
• はみ出す可能性のあるすべてのテキストにtruncateを指定する
• 省略表示するテキストを含む flex 子要素にmin-w-0を指定する
• クリック可能なすべての要素にcursor-pointerを指定する

禁止事項

• Tooltip を PopoverTrigger または DropdownMenuTrigger の中にネストしないでください
• transition-all は使わず、個別のプロパティを指定してください（transition-[width]）
• カスタムの <aside> を作らず、shadcn/ui の Sidebar システムを使ってください
• 折りたたみ時に w-16（64px）を使わないでください。CSS 変数で 3rem（48px）に設定されています
• グループラベルに display:none を使わず、-mt-8 opacity-0 のテクニックを使ってください
• h-screen を使わず、モバイル Safari との互換性のために h-dvh を使ってください
• TooltipProvider を自分で追加しないでください。すでに SidebarProvider に含まれています
• Tooltip でラップされた要素を Popover／Dialog のコンテンツ内に置かないでください。Radix のツールチップはホバーだけでなく、フォーカスでも起動します。ポップオーバーを開くと、フォーカスがそのコンテンツ内に移動し、最初にフォーカス可能な要素でツールチップが自動的に表示されます。詳しくは、以下の「ツールチップのフォーカス時起動に関する注意点」を参照してください。

---

ツールチップのフォーカス時起動に関する注意点（Radix）

問題： Radix の <Tooltip> はホバーとフォーカスの両方で起動します。<PopoverContent> の中にツールチップでラップされたボタンを配置すると、ポップオーバーを開いたときにフォーカスがそのコンテンツ内に移動し、最初にフォーカス可能な要素でツールチップがすぐに表示されます。ホバーしていなくても起動します。

これは、内部にツールチップを含む以下のコンポーネントに影響します：

• PopoverContent
• DialogContent
• SheetContent
• 開いたときにフォーカスを受け取るコンテナー

解決策： ツールチップを含むコンポーネントに showTooltips プロパティを追加し、フォーカスをトラップするコンテナー内で使用するときは無効にしてください：

interface ThemeToggleProps {
  showTooltips?: boolean  // default true
}

function ThemeToggle({ showTooltips = true }: ThemeToggleProps) {
  const btn = <button aria-label={label}>...</button>

  // Skip tooltip wrapper when inside popover/dialog
  if (!showTooltips) return btn

  return (
    <Tooltip>
      <TooltipTrigger asChild>{btn}</TooltipTrigger>
      <TooltipContent>{label}</TooltipContent>
    </Tooltip>
  )
}

// Usage inside popover — tooltips disabled (label "Theme" provides context)
<PopoverContent>
  <span>Theme</span>
  <ThemeToggle showTooltips={false} />
</PopoverContent>

// Usage in header — tooltips enabled (icon-only, needs tooltip)
<ThemeToggle showTooltips={true} />

delayDuration を増やすだけではだめですか？ 遅延時間が適用されるのはホバー時のみです。Radix ではフォーカスによって起動するツールチップは delayDuration を無視し、値にかかわらずすぐに表示されます。

基本ルール： ツールチップでラップされた要素がフォーカスをトラップするコンテナー内にある場合は、ツールチップを無効にするか、隣接するテキストラベルで十分な情報を伝えられるようにしてください。

---

チェックリスト

• npx shadcn@latest add sidebar tooltip avatar popover collapsible separator skeleton sheet
• globals.css に CSS 変数（ライト＋ダーク）を設定し、Tailwind の設定も行う
• アプリを SidebarProvider でラップし、open／onOpenChange と localStorage を設定する
• Sidebar collapsible="icon" className="border-r group/sidebar"
• ExpandButton：hidden group-hover/sidebar:flex を設定し、アバターと同じサイズにする
• CollapseToggle：PanelLeftOpen rotate-180 を設定し、条件付きでレンダリングする
• 折りたたみ時にアバターを group-hover/sidebar:hidden にする
• すべてのナビゲーション項目で SidebarMenuButton tooltip={label} を使う
• グループラベルには SidebarGroupLabel を使う（自動的に非表示になります）
• 折りたたみ可能なセクションには Collapsible と SidebarMenuSub を使う
• フッターのウィジェット：折りたたみ時はアイコン＋ツールチップ、展開時はすべてのコンテンツを表示する
• 端にホバーしたときの切り替えには SidebarRail を使う
• SidebarInset className="overflow-y-auto h-dvh"
• ローディングスケルトンの幅をサイドバー（w-64）に合わせる
• モバイルでは Sheet として自動的に表示する
• キーボードショートカット：⌘B／Ctrl+B（自動）