"use client"; import React, { Dispatch, SetStateAction, useState, useEffect } from "react"; import Image from "next/image"; import { Icon } from "@iconify/react"; import Link from "next/link"; import DashboardContainer from "../main/dashboard/dashboard-container"; import { usePathname } from "next/navigation"; import { useTheme } from "../layout/theme-context"; import { AnimatePresence, motion } from "framer-motion"; import Option from "./option"; interface RetractingSidebarProps { sidebarData: boolean; updateSidebarData: (newData: boolean) => void; } interface SidebarItem { title: string; link?: string; children?: SidebarItem[]; } interface SidebarSection { title?: string; items?: SidebarItem[]; children?: SidebarItem[]; } const getSidebarByLevel = (levelId: string | null) => { if (levelId === "1") { return [ { title: "Dashboard", items: [ { title: "Dashboard", icon: () => ( ), link: "/admin/dashboard", }, ], }, { title: "System", items: [ { title: "Categories", icon: () => ( ), link: "/admin/master-category", }, { title: "User Management", icon: () => , link: "/admin/master-user", }, ], }, ]; } if (levelId === "3") { return [ { title: "Dashboard", items: [ { title: "Dashboard", icon: () => ( ), link: "/admin/dashboard", }, ], }, { items: [ { title: "Content Website", icon: () => , link: "/admin/content-website", }, ], }, { title: "News & Article", items: [ { title: "News & Article", icon: () => ( ), children: [ { title: "Text", icon: () => , link: "/admin/news-article/text", }, { title: "Image", icon: () => , link: "/admin/news-article/image", }, { title: "Video", icon: () => , link: "/admin/news-article/video", }, { title: "Audio", icon: () => , link: "/admin/news-article/audio", }, ], }, ], }, { items: [ { title: "My Content", icon: () => , link: "/admin/my-content", }, ], }, { items: [ { title: "Media Library", icon: () => , link: "/admin/media-library", }, ], }, ]; } if (levelId === "2") { return [ { title: "Dashboard", items: [ { title: "Dashboard", icon: () => ( ), link: "/admin/dashboard", }, ], }, { items: [ { title: "Content Website", icon: () => , link: "/admin/content-website", }, ], }, { title: "News & Article", items: [ { title: "News & Article", icon: () => ( ), children: [ { title: "Text", icon: () => , link: "/admin/news-article/text", }, { title: "Image", icon: () => , link: "/admin/news-article/image", }, { title: "Video", icon: () => , link: "/admin/news-article/video", }, { title: "Audio", icon: () => , link: "/admin/news-article/audio", }, ], }, ], }, ]; } // fallback kalau Level tidak dikenal return []; }; 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 { theme, toggleTheme } = useTheme(); const [username, setUsername] = useState("Guest"); const [LevelId, setLevelId] = useState(null); const [openMenus, setOpenMenus] = useState([]); // =============================== // GET COOKIE // =============================== useEffect(() => { const getCookie = (name: string) => { const match = document.cookie.match( new RegExp("(^| )" + name + "=([^;]+)"), ); return match ? decodeURIComponent(match[2]) : null; }; const cookieUsername = getCookie("username"); const cookieLevelId = getCookie("ulne"); if (cookieUsername) setUsername(cookieUsername); if (cookieLevelId) setLevelId(cookieLevelId); }, []); // =============================== // AUTO EXPAND JIKA DI NEWS ARTICLE // =============================== useEffect(() => { if (pathname.startsWith("/admin/news-article")) { setOpenMenus(["News & Article"]); } }, [pathname]); const toggleMenu = (title: string) => { setOpenMenus((prev) => prev.includes(title) ? prev.filter((item) => item !== title) : [...prev, title], ); }; const sidebarSections = getSidebarByLevel(LevelId); return (
{/* ========================= */} {/* SCROLLABLE AREA */} {/* ========================= */}
{/* HEADER */}
Qudo Logo {open && ( )}
{/* ========================= */} {/* MENU SECTION */} {/* ========================= */}
{sidebarSections.map((section, sectionIndex) => (
{open && section.title && (

{section.title}

)}
{section.items?.map((item: any) => { // ============================= // ITEM WITH CHILDREN (ACCORDION) // ============================= if (item.children) { const isExpanded = openMenus.includes(item.title); return (
toggleMenu(item.title)} className="cursor-pointer" >
{open && isExpanded && ( {item.children?.map((child: any) => ( )}
); } return (
))}
{/* ========================= */} {/* BOTTOM SECTION */} {/* ========================= */}
{/* THEME TOGGLE */} {/* SETTINGS */}
); };