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,7 +61,17 @@ 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">
+            {/* 學習模式的結束學習按鈕 */}
+            {showExitLearning ? (
+              <button
+                onClick={onExitLearning}
+                className="text-gray-600 hover:text-gray-900"
+              >
+                × 結束學習
+              </button>
+            ) : (
+              <>
                 {/* 通知按鈕 */}
                 <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">
@@ -82,6 +92,8 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
                     登出
                   </button>
                 </div>
+              </>
+            )}
           </div>
         </div>