fix: 完善手機版導航設計，隱藏頂部用戶資訊

📱 手機版 UI 最佳化：
- 頂部只保留漢堡選單和 Logo（極簡設計）
- 用戶資訊、通知按鈕移到桌面版專用（hidden md:flex）
- 手機版的用戶資訊完全在下拉選單中

🎯 現在的手機版佈局：
頂部：[🍔] DramaLing
下拉：導航 + 用戶資訊 + 登出

✅ 符合移動端設計最佳實踐：
- 頂部導航條簡潔明瞭
- 避免小螢幕上的擁擠感
- 用戶資訊放在邏輯位置（選單底部）

🚀 DramaLing 現在有真正專業的響應式設計！

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/components/Navigation.tsx

@@ -61,27 +61,39 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
             </div>
           </div>
 
-          <div className="flex items-center space-x-4">
+          <div className="hidden md:flex items-center space-x-4">
-            {/* 通知按鈕 */}
+            {/* 學習模式的結束學習按鈕 */}
-            <button className="p-2 text-gray-600 hover:text-gray-900">
+            {showExitLearning ? (
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-              </svg>
-            </button>
-
-            {/* 用戶資訊 */}
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-semibold">
-                {user?.username?.[0]?.toUpperCase() || 'U'}
-              </div>
-              <span className="text-sm font-medium">{user?.displayName || user?.username}</span>
               <button
-                onClick={logout}
+                onClick={onExitLearning}
-                className="ml-4 text-sm text-gray-600 hover:text-gray-900"
+                className="text-gray-600 hover:text-gray-900"
               >
-                登出
+                × 結束學習
               </button>
-            </div>
+            ) : (
+              <>
+                {/* 通知按鈕 */}
+                <button className="p-2 text-gray-600 hover:text-gray-900">
+                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                  </svg>
+                </button>
+
+                {/* 用戶資訊 */}
+                <div className="flex items-center space-x-2">
+                  <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white font-semibold">
+                    {user?.username?.[0]?.toUpperCase() || 'U'}
+                  </div>
+                  <span className="text-sm font-medium">{user?.displayName || user?.username}</span>
+                  <button
+                    onClick={logout}
+                    className="ml-4 text-sm text-gray-600 hover:text-gray-900"
+                  >
+                    登出
+                  </button>
+                </div>
+              </>
+            )}
           </div>
         </div>