fix: 保留通知按鈕在手機版，完善響應式設計

📱 手機版最終設計：
頂部：[🍔] DramaLing [🔔]
- 漢堡選單：導航功能
- Logo：品牌識別
- 通知按鈕：重要功能保留

🎯 響應式顯示策略：
- 通知按鈕：桌面和手機都顯示
- 用戶資訊：只在桌面版顯示（頭像、用戶名、登出）
- 下拉選單：手機版的用戶資訊區域

✅ 現在的完美設計：
🖥️ 桌面：[🍔] DramaLing | 導航項目     [🔔] [👤 用戶名] [登出]
📱 手機：[🍔] DramaLing [🔔]

🚀 符合用戶期望的直覺設計！

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

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

frontend/components/Navigation.tsx

@@ -61,7 +61,7 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
             </div>
           </div>
 
-          <div className="hidden md:flex items-center space-x-4">
+          <div className="flex items-center space-x-4">
             {/* 學習模式的結束學習按鈕 */}
             {showExitLearning ? (
               <button
@@ -72,15 +72,15 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
               </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">
                     <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="hidden md: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>