ナビゲーションバー (Header) コンポーネントは、各テーマページの上部に表示されます。各テーマには、異なるナビゲーションパターン、モバイルメニューの実装、視覚スタイルを持つ独自のヘッダーデザインがあります。
テーマバリアント
| テーマ | コンポーネント | スタイル |
|---|---|---|
| Liquid | HeaderLiquid.astro | ぼかしの背景を持つ透明なヘッダー |
| Glass | HeaderGlass.astro | すりガラスのナビゲーションバー |
| Neo | HeaderNeo.astro | 大胆でハイコントラストなヘッダー |
| Luxury | HeaderLuxury.astro | ゴールドアクセントのあるプレミアムヘッダー |
| Minimal | HeaderMinimal.astro | クリーンでミニマルなナビゲーション |
| Aurora | HeaderAurora.astro | グラデーションアクセントのヘッダー |
すべてのバリアントは src/components/layout/header/ にあります。
機能
各ヘッダーバリアントには、通常次のものが含まれています：
- デスクトップナビゲーション: ドロップダウンメニュー付きの水平ナビゲーション
- モバイルナビゲーション: スライドイン式の引き出しがあるハンバーガーメニュー
- テーマスイッチャー: 統合されたテーマ選択コンポーネント
- 言語スイッチャー: 国旗アイコン付きのロケール選択
- ロゴ: ブランドロゴコンポーネント
ナビゲーションの構成
ナビゲーションリンクは src/config/navigation.ts で設定されています（Luxuryテーマの拡張ナビゲーションを含む）。
ナビゲーションラベルは src/locales/{lang}/nav.json を介して翻訳されます。
ℹ️
Propsなし
ヘッダーコンポーネントは外部のPropsを受け取りません。ナビゲーション項目は設定ファイルで定義され、ラベルはロケールJSONからロードされます。