Redmineの設定

🎯 Phase 2: サイドバーコンポーネント実装¶

📋 実装タスク¶

1. サイドバー基本レイアウト¶

• Sidebar.tsx コンポーネント作成
• 固定幅サイドバー（256px）実装
• スクロール可能なコンテンツエリア

2. ナビゲーションメニュー項目¶

const navigationItems = [
  { icon: '🏠', label: 'ホーム', path: '/dashboard' },
  { icon: '📄', label: 'ドキュメント', path: '/documents' },
  { icon: '🎫', label: 'チケット', path: '/tickets' },
  { icon: '🚀', label: 'プロジェクト', path: '/projects' },
  { icon: '🤖', label: 'RAGアシスタント', path: '/rag-advisor/chat', active: true },
  { icon: '⚙️', label: '設定', path: '/settings' },
  { icon: '📊', label: '統計', path: '/analytics' }
];

3. ナビゲーション機能¶

• アクティブ状態表示（現在位置ハイライト）
• ホバー効果実装
• React Router統合
• スムーズな遷移アニメーション

4. 折りたたみ機能¶

• サイドバー開閉ボタン
• 縮小表示モード（アイコンのみ）
• 状態管理（localStorage保存）
• アニメーション効果

5. モバイル対応ドロワー¶

• オーバーレイドロワー実装
• スワイプジェスチャー対応
• 背景クリックで閉じる
• モバイル専用スタイル

6. 追加機能¶

• ユーザー情報セクション（下部）
• バージョン情報表示
• ショートカットキー対応（ESC等）

🎨 技術仕様¶

コンポーネント構造¶

// src/components/Layout/Sidebar.tsx
interface SidebarProps {
  isOpen?: boolean;
  isCollapsed?: boolean;
  currentPath?: string;
  onToggle?: () => void;
  onNavigate?: (path: string) => void;
}

interface NavigationItem {
  icon: string;
  label: string;
  path: string;
  badge?: number;
  submenu?: NavigationItem[];
}

スタイリング仕様¶

/* サイドバー基本 */
.sidebar {
  width: 256px;
  background: #FFFFFF;
  border-right: 1px solid #E5E7EB;
  transition: all 0.3s ease;
}

.sidebar-collapsed {
  width: 64px;
}

/* ナビゲーション項目 */
.nav-item {
  padding: 12px 16px;
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background: #F3F4F6;
}

.nav-item.active {
  background: #E7F5E7;
  color: #00B900;
  font-weight: 600;
}

📱 レスポンシブ対応¶

ブレークポイント別実装¶

• デスクトップ (>1024px): 固定サイドバー
• タブレット (768-1024px): 折りたたみ可能
• モバイル (<768px): オーバーレイドロワー

モバイル専用機能¶

• スワイプで開閉
• タッチフレンドリーなボタンサイズ（44px以上）
• 背景タップで閉じる

🔗 関連¶

依存関係¶

• React Router DOM: ナビゲーション
• React Hooks: 状態管理
• TailwindCSS: スタイリング
• Lucide React: アイコン

統合ポイント¶

• Header.tsx との連携
• 既存RAGチャットとの整合性
• 全体レイアウトシステム

✅ 完了基準¶

1. 機能: 全ナビゲーション項目の動作確認
2. デザイン: LINEデザイン言語適用
3. レスポンシブ: 全デバイスでの表示確認
4. パフォーマンス: スムーズなアニメーション

🔗 関連チケット¶

• 親チケット: #449 (UI完全実装)
• 前フェーズ: #450 (ヘッダー実装)
• 次フェーズ: レイアウト統合