68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
export default function Navbar() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="bg-gray-800 text-white">
|
|
<div className="flex justify-between items-center py-4 px-6 max-w-screen-xl mx-auto">
|
|
<div className="flex items-center space-x-3">
|
|
<Image
|
|
src="/logo.png" // Replace with your logo path
|
|
alt="Logo"
|
|
className="h-8 w-8"
|
|
/>
|
|
<Link href="/" className="text-2xl font-bold">
|
|
Null Translation Group
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Navigation Links */}
|
|
<nav className="hidden md:flex space-x-6">
|
|
<Link href="/" className="hover:text-gray-400">
|
|
Book List
|
|
</Link>
|
|
<Link href="https://patreon.com/NullTranslationGroup" className="hover:text-gray-400">
|
|
Patreon
|
|
</Link>
|
|
</nav>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="md:hidden flex items-center text-gray-400 hover:text-white"
|
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 12h16m-7 6h7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{isMenuOpen && (
|
|
<div className="md:hidden bg-gray-700 px-6 pb-4">
|
|
<Link href="/" className="block py-2 hover:text-gray-400">
|
|
Book List
|
|
</Link>
|
|
<Link href="https://patreon/NullTranslationGroup" className="block py-2 hover:text-gray-400">
|
|
Patreon
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|