arifal/setrip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add responsive mobile tablet laptop and desktop

Browse Source
This commit is contained in:
arifal
2026-04-16 16:49:32 +07:00
parent d0480df31a
commit 82c1da9951
9 changed files with 195 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shared/navbar.tsx
+83 -3
View File
@@ -1,14 +1,17 @@
"use client";
import { useState } from "react";
import Link from "next/link";
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-14 max-w-6xl items-center justify-between px-4">
{/* Logo */}
<Link href="/" className="flex items-center gap-1.5">
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary-600 text-xs font-bold text-white">
S
@@ -18,7 +21,8 @@ export function Navbar() {
</span>
</Link>
<div className="flex items-center gap-1">
{/* 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"
@@ -34,12 +38,11 @@ export function Navbar() {
>
Buat Trip
</Link>
<div className="ml-2 flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
{session.user.name?.charAt(0).toUpperCase()}
</div>
<span className="hidden text-sm font-medium text-neutral-700 sm:block">
<span className="text-sm font-medium text-neutral-700">
{session.user.name}
</span>
<button
@@ -67,7 +70,84 @@ export function Navbar() {
</>
)}
</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>
{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>
<div className="mt-2 flex items-center justify-between rounded-lg bg-neutral-50 px-3 py-2.5">
<div className="flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-600 text-xs font-bold text-white">
{session.user.name?.charAt(0).toUpperCase()}
</div>
<span className="text-sm font-medium text-neutral-700">
{session.user.name}
</span>
</div>
<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>
);
}