fix: 修正漢堡選單位置,符合標準 UI 模式
🔧 UI 位置修正: - 將漢堡選單按鈕移到 Logo 左邊 - 符合標準的移動端 UI 設計模式 - 提升用戶的直覺操作體驗 📱 現在的手機版佈局: [🍔] DramaLing [通知] ✅ 標準 UI 模式: - 漢堡選單在左上角是業界標準 - 用戶更容易找到和操作 - 與主流 App 的使用習慣一致 🎯 完美的響應式導航系統現已完成! 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
4797366a25
commit
c4010c362c
|
|
@ -26,9 +26,24 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="flex justify-between h-16">
|
<div className="flex justify-between h-16">
|
||||||
<div className="flex items-center space-x-8">
|
<div className="flex items-center space-x-8">
|
||||||
|
{/* 手機版漢堡選單按鈕 */}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||||
|
className="md:hidden p-2 text-gray-600 hover:text-gray-900"
|
||||||
|
>
|
||||||
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
{isMobileMenuOpen ? (
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
) : (
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
<Link href="/dashboard" className="text-2xl font-bold text-primary">
|
<Link href="/dashboard" className="text-2xl font-bold text-primary">
|
||||||
DramaLing
|
DramaLing
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="hidden md:flex space-x-6">
|
<div className="hidden md:flex space-x-6">
|
||||||
{navItems.map((item) => (
|
{navItems.map((item) => (
|
||||||
<Link
|
<Link
|
||||||
|
|
@ -44,20 +59,6 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 手機版漢堡選單按鈕 */}
|
|
||||||
<button
|
|
||||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
||||||
className="md:hidden p-2 text-gray-600 hover:text-gray-900"
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
{isMobileMenuOpen ? (
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
||||||
) : (
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue