ナビゲーションコンポーネント

ページヘッダーの統一デザインパターン

Bookshelf、Exploreなどの主要ページでは、以下の統一されたヘッダーデザインパターンを採用しています。

デザイン原則

3カラムレイアウト（デスクトップ）:
- 左: アイコン付きのページタイトル + サブタイトル
- 中央: 検索バー（最大幅を確保）
- 右: アクションボタン（固定幅）
2行レイアウト（モバイル）:
- 1行目: アイコン + タイトル + アクションボタン
- 2行目: 検索バー（全幅）
視覚的な一貫性:
- アイコンはprimary/10の背景色で統一
- 検索バーは中央配置で、プレースホルダーテキストは簡潔に
- アクションボタンは右端に配置し、必要に応じて表示/非表示を切り替え

実装例

{/* Desktop Layout */}
<div className="hidden md:flex items-center justify-between gap-6">
  {/* Left: Title with icon */}
  <div className="flex items-center gap-3 min-w-0 shrink-0">
    <div className="p-2 rounded-xl bg-primary/10">
      <IconComponent className="h-5 w-5 text-primary" />
    </div>
    <div className="min-w-0">
      <h1 className="text-xl font-bold tracking-tight truncate">
        Page Title
      </h1>
      <p className="text-xs text-muted-foreground">
        Subtitle
      </p>
    </div>
  </div>

  {/* Center: Search */}
  <div className="flex-1 flex justify-center max-w-2xl">
    <div className="relative w-full">
      <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
      <Input
        type="text"
        placeholder="Search..."
        className="pl-11 h-11 bg-input border shadow-sm"
      />
    </div>
  </div>

  {/* Right: Action buttons */}
  <div className="flex items-center gap-2 shrink-0 w-[140px] justify-end">
    {/* Action buttons here */}
  </div>
</div>

ページごとのアイコン

Bookshelf: Library（プライベート書斎）
Explore: Store（公開ストア）

この統一されたデザインパターンにより、ユーザーは異なるページ間を移動しても一貫した操作感を得られます。

ナビゲーションコンポーネント

アプリケーション全体のナビゲーションを担うコンポーネント群です。

デスクトップビューにおける主要なナビゲーションとグローバルアクションを提供するヘッダーコンポーネントです。

責務:
- ロゴとブランディング: アプリケーションロゴを表示し、ホームへのリンクを提供する。
- メインナビゲーション: 主要ページ（Bookshelf, Writing, AI, Explore）へのリンクを提供する。
- ユーザーメニュー: ログインユーザーのアバターとユーザー名を表示する。Settingsで設定されたプロフィール情報（userProfileAtom）を優先し、未設定の場合はSupabaseのユーザーメタデータを使用する。設定、マイワークス、ライブラリ、ジョブモニター、ログアウトなどのアクションを含むドロップダウンメニューを提供する。
- レスポンシブ: モバイルビューでは、ロゴのみを表示し、ナビゲーションリンクとユーザーメニューを非表示にする（BottomNavに委譲）。
主要なProps: なし
関連Atoms:
- userAtom: ログインユーザー情報を取得。
- userProfileAtom: ユーザーのカスタムプロフィール情報（アバター、ユーザー名）を取得。
- processingJobsAtom: ジョブの実行状態を監視。
- totalMenuNotificationsAtom: メニューバッジの通知数を取得。

`BottomNav`

モバイルビューにおける主要なナビゲーションを提供するボトムバーコンポーネントです。

責務:
- メインナビゲーション: 主要ページへのアイコンベースのリンクを提供する。
- コンテキストメニュー: 現在のページ（ProjectやAI）に応じたサブメニュー（パネル切り替えなど）をPopoverで提供する。
- 統一されたメニュー: デスクトップヘッダーと同等の機能（設定、ジョブ、ユーザーアクション）を持つドロップダウンメニューを提供する。ユーザープロフィール（アバター、ユーザー名）もここで確認できる。
  - メニューは上方向（side="top"）に展開される。
- 通知バッジ: ジョブ完了などの通知をメニューアイコンにバッジとして表示する。
主要なProps: なし
関連Atoms:
- mobilePanelAtom: モバイルビューでのパネル切り替え状態を管理。
- showJobMonitorAtom: ジョブモニターの表示切り替え。
- userProfileAtom: ユーザーのカスタムプロフィール情報を取得し、メニュー内に表示する。

ナビゲーションコンポーネント

ページヘッダーの統一デザインパターン

デザイン原則

実装例

ページごとのアイコン

ナビゲーションコンポーネント

`Header`

`BottomNav`

On this page