Spaces:
Sleeping
Sleeping
File size: 4,785 Bytes
159e263 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
import { useState } from 'react';
import { Link } from 'react-router-dom';
export default function Navbar() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<nav className="bg-gray-900 text-white shadow-lg">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<Link to="/" className="flex items-center">
<img
className="h-8 w-8 mr-2"
src="/roblox-logo.png"
alt="Roblox Logo"
/>
<span className="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
Roblox 基礎入門
</span>
</Link>
</div>
</div>
{/* Desktop menu */}
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<Link to="/" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
首頁
</Link>
<Link to="/lesson1" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
第一課：基礎入門
</Link>
<Link to="/lesson2" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
第二課：賽車遊戲
</Link>
<Link to="/lesson3" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
第三課：互動機關
</Link>
<Link to="/lesson4" className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">
第四課：視覺化設計
</Link>
</div>
</div>
{/* Mobile menu button */}
<div className="md:hidden flex items-center">
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
>
<span className="sr-only">Open main menu</span>
{isMenuOpen ? (
<svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
) : (
<svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
</button>
</div>
</div>
</div>
{/* Mobile menu */}
{isMenuOpen && (
<div className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/"
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
onClick={() => setIsMenuOpen(false)}
>
首頁
</Link>
<Link
to="/lesson1"
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
onClick={() => setIsMenuOpen(false)}
>
第一課：基礎入門
</Link>
<Link
to="/lesson2"
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
onClick={() => setIsMenuOpen(false)}
>
第二課：賽車遊戲
</Link>
<Link
to="/lesson3"
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
onClick={() => setIsMenuOpen(false)}
>
第三課：互動機關
</Link>
<Link
to="/lesson4"
className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800 hover:text-white"
onClick={() => setIsMenuOpen(false)}
>
第四課：視覺化設計
</Link>
</div>
</div>
)}
</nav>
);
}
|