"use client"; import React, { Dispatch, SetStateAction, useState, useEffect, ReactNode, } from "react"; import Image from "next/image"; import { Icon } from "@iconify/react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import { motion, AnimatePresence } from "framer-motion"; import Option from "./option"; import Cookies from "js-cookie"; interface RetractingSidebarProps { sidebarData: boolean; updateSidebarData: (newData: boolean) => void; } interface SidebarItemBase { title: string; icon: () => ReactNode; } interface SidebarLinkItem extends SidebarItemBase { link: string; } interface SidebarParentItem extends SidebarItemBase { children: SidebarLinkItem[]; } type SidebarItem = SidebarLinkItem | SidebarParentItem; interface SidebarSection { title: string; items: SidebarItem[]; } const sidebarSections: SidebarSection[] = [ { title: "Dashboard", items: [ { title: "Dashboard", icon: () => ( ), link: "/admin/dashboard", }, ], }, { title: "Konten", items: [ { title: "Konten", icon: () => , children: [ { title: "Foto", icon: () => , link: "/admin/content/image", }, { title: "Audio Visual", icon: () => ( ), link: "/admin/content/audio-visual", }, { title: "Teks", icon: () => , link: "/admin/content/document", }, { title: "Audio", icon: () => ( ), link: "/admin/content/audio", }, ], }, { title: "Master Data", icon: () => , children: [ { title: "Kategori Konten", icon: () => , link: "/admin/categories", }, ], }, ], }, ]; export const RetractingSidebar = ({ sidebarData, updateSidebarData, }: RetractingSidebarProps) => { const pathname = usePathname(); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; } return ( <> {/* DESKTOP SIDEBAR */} {/* Desktop Toggle Button - appears when sidebar is collapsed */} {!sidebarData && ( updateSidebarData(true)} > )} {/* Mobile Toggle Button */} {!sidebarData && ( updateSidebarData(true)} > )} {/* MOBILE SIDEBAR */} {sidebarData && ( {/* */} )} ); }; const SidebarContent = ({ open, pathname, updateSidebarData, }: { open: boolean; pathname: string; updateSidebarData: (newData: boolean) => void; }) => { const [expanded, setExpanded] = useState([]); const toggleExpand = (title: string) => { setExpanded((prev) => prev.includes(title) ? prev.filter((t) => t !== title) : [...prev, title] ); }; const handleLogout = () => { Object.keys(Cookies.get()).forEach((cookieName) => { Cookies.remove(cookieName); }); window.location.href = "/"; }; return (
{/* SCROLLABLE TOP SECTION */}
{/* Logo */}
{open && ( Netidhub Admin Panel )} {open && ( updateSidebarData(false)} > )}
{/* Navigation Sections */}
{sidebarSections.map((section) => ( {open && ( {section.title} )}
{section.items.map((item) => "children" in item ? (
{/* Parent menu dengan toggle */}
toggleExpand(item.title)} className="w-full flex items-center justify-between pr-2" >
{/* Children expand/collapse */} {item.children.map((child) => (
) : (
))}
{/* ... (BOTTOM SECTION tetap sama) */}
); }; const Sidebar = () => { const [open, setOpen] = useState(true); const [expanded, setExpanded] = useState(null); // track submenu yg dibuka const pathname = usePathname(); const toggleExpand = (title: string) => { setExpanded((prev) => (prev === title ? null : title)); }; return ( {/* BAGIAN ATAS */}
{!open && (
)} {/* Logo + tombol collapse */}
{open && ( )}
{/* Menu utama */}
{sidebarSections.map((section) => (
{open && (

{section.title}

)} {section.items.map((item) => "children" in item ? (
{/* Parent menu + chevron */} {/* Children expand/collapse */} {item.children.map((child) => (
) : (
))}
{/* BAGIAN BAWAH */}
); }; export default Sidebar; const TitleSection = ({ open }: { open: boolean }) => { return (
logo
{/* {open && } */}
); }; const ToggleClose = ({ open, setOpen, }: { open: boolean; setOpen: Dispatch>; }) => { return ( setOpen((pv) => !pv)}>
{/* */} {/* {open && ( Hide )} */}
); }; // const ExampleContent = () => ( //
// //
// );