67 lines
2.3 KiB
TypeScript
67 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { logout } from "@/app/actions/auth";
|
|
|
|
export function NavbarMenu({ email }: { email: string }) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{/* Desktop menu */}
|
|
<div className="hidden sm:flex items-center gap-4">
|
|
<span className="text-sm text-muted font-mono">{email}</span>
|
|
<Link href="/change-password" className="text-sm text-accent hover:text-accent-hover font-medium">
|
|
Change Password
|
|
</Link>
|
|
<form action={logout}>
|
|
<button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Mobile hamburger */}
|
|
<div className="sm:hidden">
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(!open)}
|
|
className="p-2 rounded-lg hover:bg-surface transition-colors cursor-pointer"
|
|
aria-label="Menu"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
{open ? (
|
|
<>
|
|
<line x1="4" y1="4" x2="16" y2="16" />
|
|
<line x1="16" y1="4" x2="4" y2="16" />
|
|
</>
|
|
) : (
|
|
<>
|
|
<line x1="3" y1="5" x2="17" y2="5" />
|
|
<line x1="3" y1="10" x2="17" y2="10" />
|
|
<line x1="3" y1="15" x2="17" y2="15" />
|
|
</>
|
|
)}
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Mobile dropdown */}
|
|
{open && (
|
|
<div className="absolute right-4 top-14 bg-white border-2 border-border rounded-xl shadow-lg p-4 flex flex-col gap-3 min-w-[180px]">
|
|
<span className="text-sm text-muted font-mono truncate">{email}</span>
|
|
<Link href="/change-password" onClick={() => setOpen(false)} className="text-sm text-accent hover:text-accent-hover font-medium">
|
|
Change Password
|
|
</Link>
|
|
<form action={logout}>
|
|
<button type="submit" className="text-sm text-danger hover:text-red-700 font-medium cursor-pointer">
|
|
Logout
|
|
</button>
|
|
</form>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|