123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Menu,
|
|
X,
|
|
Home,
|
|
ChevronDown,
|
|
Video,
|
|
Music,
|
|
Image as ImageIcon,
|
|
FileText,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
export default function FloatingMenuNews() {
|
|
const [open, setOpen] = useState(false);
|
|
const [openKonten, setOpenKonten] = 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-[#8a5a0c] 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-[#8a5a0c]">
|
|
<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 text-base font-medium">
|
|
{/* HOME */}
|
|
<Link href="/news-services">
|
|
<div className="flex items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition">
|
|
<span>Home</span>
|
|
<Home size={20} />
|
|
</div>
|
|
</Link>
|
|
|
|
{/* KONTEN */}
|
|
<div>
|
|
<button
|
|
onClick={() => setOpenKonten(!openKonten)}
|
|
className="flex w-full items-center justify-between border-b border-white/20 px-6 py-5 hover:bg-white/10 transition"
|
|
>
|
|
<span>Konten</span>
|
|
<ChevronDown
|
|
size={20}
|
|
className={`transition-transform duration-300 ${
|
|
openKonten ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
{/* SUBMENU */}
|
|
<div
|
|
className={`overflow-hidden bg-[#a8772a] transition-all duration-300 ${
|
|
openKonten ? "max-h-60" : "max-h-0"
|
|
}`}
|
|
>
|
|
<Link href={"/video/filter"}>
|
|
<SubMenuItem icon={<Video size={18} />} label="Audio Visual" />
|
|
</Link>
|
|
<Link href={"/audio/filter"}>
|
|
<SubMenuItem icon={<Music size={18} />} label="Audio" />
|
|
</Link>
|
|
<Link href={"/image/filter"}>
|
|
<SubMenuItem icon={<ImageIcon size={18} />} label="Foto" />
|
|
</Link>
|
|
<Link href={"/document/filter"}>
|
|
<SubMenuItem icon={<FileText size={18} />} label="Teks" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/* ================= SUBMENU ================= */
|
|
|
|
function SubMenuItem({
|
|
icon,
|
|
label,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between px-8 py-4 text-sm hover:bg-white/20 transition cursor-pointer">
|
|
<span>{label}</span>
|
|
{icon}
|
|
</div>
|
|
);
|
|
}
|