74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Menu, X, Home, Box, Briefcase, Newspaper, LogIn } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function FloatingMenu() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
{/* FLOATING BUTTON */}
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
className="fixed right-6 top-6 z-[100] flex h-12 w-12 items-center justify-center rounded-md bg-[#966314] text-white shadow-lg"
|
|
>
|
|
<Menu />
|
|
</button>
|
|
|
|
{/* OVERLAY */}
|
|
{open && (
|
|
<div
|
|
onClick={() => setOpen(false)}
|
|
className="fixed inset-0 z-[90] bg-black/40"
|
|
/>
|
|
)}
|
|
|
|
{/* SIDEBAR */}
|
|
<aside
|
|
className={`fixed right-0 top-0 z-[110] h-full w-[280px] bg-[#966314] text-white transition-transform duration-300 ${
|
|
open ? "translate-x-0" : "translate-x-full"
|
|
}`}
|
|
>
|
|
{/* HEADER */}
|
|
<div className="flex items-center justify-between border-b border-white/20 p-6">
|
|
<div className="flex rounded-full bg-white text-sm font-semibold text-[#966314]">
|
|
<button className="rounded-full bg-white px-3 py-1">ID</button>
|
|
<button className="px-3 py-1">EN</button>
|
|
</div>
|
|
|
|
<button onClick={() => setOpen(false)}>
|
|
<X />
|
|
</button>
|
|
</div>
|
|
|
|
{/* MENU */}
|
|
<nav className="flex flex-col gap-6 p-6 text-sm font-medium">
|
|
<MenuItem icon={<Home size={18} />} label="Home" />
|
|
<MenuItem icon={<Box size={18} />} label="Product" />
|
|
<MenuItem icon={<Briefcase size={18} />} label="Services" />
|
|
<Link href="/news-services?highlight=1">
|
|
<MenuItem
|
|
icon={<Newspaper size={18} />}
|
|
label="News and Services"
|
|
/>
|
|
</Link>
|
|
<Link href="/auth">
|
|
<MenuItem icon={<LogIn size={18} />} label="Login" />
|
|
</Link>
|
|
</nav>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function MenuItem({ icon, label }: { icon: React.ReactNode; label: string }) {
|
|
return (
|
|
<div className="flex cursor-pointer items-center justify-between border-b border-white/20 pb-3">
|
|
<span>{label}</span>
|
|
{icon}
|
|
</div>
|
|
);
|
|
}
|