210 lines
8.1 KiB
TypeScript
210 lines
8.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useSession, signOut } from "next-auth/react";
|
|
|
|
export function Navbar() {
|
|
const { data: session } = useSession();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-40 border-b border-neutral-200 bg-white/90 backdrop-blur-md">
|
|
<div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<Image
|
|
src="/images/SeTrip.png"
|
|
alt="SeTrip"
|
|
width={44}
|
|
height={44}
|
|
className="h-11 w-11 object-contain"
|
|
priority
|
|
/>
|
|
<span className="text-lg font-bold text-neutral-800">
|
|
Se<span className="text-primary-600">Trip</span>
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Nav */}
|
|
<div className="hidden items-center gap-1 md:flex">
|
|
<Link
|
|
href="/trips"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Open Trip
|
|
</Link>
|
|
<Link
|
|
href="/people"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Cari Teman
|
|
</Link>
|
|
|
|
{session?.user ? (
|
|
<>
|
|
<Link
|
|
href="/create-trip"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Buat Trip
|
|
</Link>
|
|
<Link
|
|
href="/profile"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Profil
|
|
</Link>
|
|
<Link
|
|
href="/verify"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Verifikasi
|
|
</Link>
|
|
<div className="ml-2 flex items-center gap-2">
|
|
<Link
|
|
href="/profile"
|
|
className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white hover:ring-2 hover:ring-primary-300"
|
|
title="Profil"
|
|
>
|
|
{session.user.name?.charAt(0).toUpperCase()}
|
|
</Link>
|
|
<Link
|
|
href="/profile"
|
|
className="max-w-[140px] truncate text-sm font-medium text-neutral-700 hover:text-primary-600"
|
|
>
|
|
{session.user.name}
|
|
</Link>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="rounded-lg px-2.5 py-1.5 text-sm font-medium text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-700"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-800"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="ml-1 rounded-lg bg-primary-600 px-4 py-1.5 text-sm font-semibold text-white transition-colors hover:bg-primary-700"
|
|
>
|
|
Daftar
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile Hamburger */}
|
|
<button
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-600 transition-colors hover:bg-neutral-100 md:hidden"
|
|
aria-label="Toggle menu"
|
|
>
|
|
{menuOpen ? (
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M5 5l10 10M15 5L5 15" />
|
|
</svg>
|
|
) : (
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<path d="M3 5h14M3 10h14M3 15h14" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="border-t border-neutral-100 bg-white px-4 pb-4 pt-2 md:hidden">
|
|
<div className="flex flex-col gap-1">
|
|
<Link
|
|
href="/trips"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Open Trip
|
|
</Link>
|
|
<Link
|
|
href="/people"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Cari Teman
|
|
</Link>
|
|
|
|
{session?.user ? (
|
|
<>
|
|
<Link
|
|
href="/create-trip"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Buat Trip
|
|
</Link>
|
|
<Link
|
|
href="/profile"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Profil
|
|
</Link>
|
|
<Link
|
|
href="/verify"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="rounded-lg px-3 py-2.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Verifikasi
|
|
</Link>
|
|
<div className="mt-2 flex items-center justify-between rounded-lg bg-neutral-50 px-3 py-2.5">
|
|
<Link
|
|
href="/profile"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="flex min-w-0 flex-1 items-center gap-2"
|
|
>
|
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
|
|
{session.user.name?.charAt(0).toUpperCase()}
|
|
</div>
|
|
<span className="truncate text-sm font-medium text-neutral-700">
|
|
{session.user.name}
|
|
</span>
|
|
</Link>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="rounded-lg px-3 py-1.5 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="mt-2 flex gap-2">
|
|
<Link
|
|
href="/login"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="flex-1 rounded-lg border border-neutral-200 py-2.5 text-center text-sm font-semibold text-neutral-700 transition-colors hover:bg-neutral-50"
|
|
>
|
|
Login
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="flex-1 rounded-lg bg-primary-600 py-2.5 text-center text-sm font-semibold text-white transition-colors hover:bg-primary-700"
|
|
>
|
|
Daftar
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
}
|