Header

アプリケーションのヘッダーレイアウト。ロゴ・ナビゲーション・アクションの3スロット構成で、sticky配置に対応する。

いつ使うか

アプリケーション全体のヘッダーバーを配置するときに使用する
ロゴ、メインナビゲーション、ユーザーメニューなどをまとめるレイアウトシェルとして使用する

いつ使わないか

ページ内のセクション見出しには使わない。Card や通常の見出し要素を使用する
サイドバーのヘッダーには使わない。専用のレイアウトコンポーネントを使用する

Usage

import { Header } from '@bi-shop-it/ui/header';
import { Nav, NavItem } from '@bi-shop-it/ui/nav';
import { Avatar } from '@bi-shop-it/ui/avatar';
import { DropdownMenu } from '@bi-shop-it/ui/dropdown-menu';

<Header
  actions={
    <DropdownMenu
      align="end"
      groups={[
        {
          items: [
            {
              icon: 'LogOut',
              label: 'ログアウト',
              variant: 'destructive',
              onSelect: () => {},
            },
          ],
        },
      ]}
      trigger={<Avatar name="田中太郎" size="sm" src="/avatar.png" />}
    />
  }
  logo={<span className="font-bold">AppName</span>}
  nav={
    <Nav>
      <NavItem href="/dashboard">ダッシュボード</NavItem>
      <NavItem isActive href="/projects">
        プロジェクト
      </NavItem>
      <NavItem href="/settings">設定</NavItem>
    </Nav>
  }
/>;

Props

Prop	型	デフォルト	説明
`logo`	`ReactNode`	—	左端に配置するロゴやサービス名
`nav`	`ReactNode`	—	ロゴの右に配置するナビゲーション
`actions`	`ReactNode`	—	右端に配置するアクション（ユーザーメニュー等）

状態

基本構成

ロゴ + Nav + ユーザーメニュー（Avatar + DropdownMenu）の標準的なヘッダー。Avatar をクリックするとログアウトメニューが表示される。

AppName

<Header
  actions={
    <DropdownMenu
      align="end"
      groups={[
        {
          items: [
            {
              icon: 'LogOut',
              label: 'ログアウト',
              variant: 'destructive',
              onSelect: handleLogout,
            },
          ],
        },
      ]}
      trigger={<Avatar name="田中太郎" size="sm" src="/avatar.png" />}
    />
  }
  logo={<span className="font-bold">AppName</span>}
  nav={
    <Nav>
      <NavItem href="/dashboard">ダッシュボード</NavItem>
      <NavItem isActive href="/projects">
        プロジェクト
      </NavItem>
      <NavItem href="/settings">設定</NavItem>
    </Nav>
  }
/>

ロゴのみ

nav と actions を省略した最小構成。

AppName

<Header logo={<span className="font-bold">AppName</span>} />

ユーザーメニュー付き

Nav とユーザーメニューを組み合わせた構成。

AppName

<Header
  actions={
    <DropdownMenu
      align="end"
      groups={[
        {
          items: [
            {
              icon: 'LogOut',
              label: 'ログアウト',
              variant: 'destructive',
              onSelect: handleLogout,
            },
          ],
        },
      ]}
      trigger={<Avatar name="田中太郎" size="sm" src="/avatar.png" />}
    />
  }
  logo={<span className="font-bold">AppName</span>}
  nav={
    <Nav>
      <NavItem href="/dashboard">ダッシュボード</NavItem>
      <NavItem isActive href="/projects">
        プロジェクト
      </NavItem>
      <NavItem href="/settings">設定</NavItem>
    </Nav>
  }
/>