"use client"; import React, { FC } from "react"; import Link from "next/link"; import { Dropdown, Sidebar, TextInput, Tooltip } from "flowbite-react"; import { useEffect, useState } from "react"; import { useSidebarContext } from "@/context/SidebarContext"; import classNames from "classnames"; import { HiAdjustments, HiChartPie, HiCog } from "react-icons/hi"; import isSmallScreen from "@/lib/helpers/is-small-screen"; import { css } from "@emotion/css"; import { FaAngleUp, FaChevronDown, FaChevronUp } from "react-icons/fa"; import { Minimize } from "lucide-react"; import { SidebarLinkBetter } from "../ui/link-better"; import { detectCase } from "@/lib/utils/detectCase"; import { Skeleton } from "../ui/Skeleton"; import { useLocal } from "@/lib/utils/use-local"; interface TreeMenuItem { title: string; href?: string; children?: TreeMenuItem[]; icon?: any; } interface TreeMenuProps { data: TreeMenuItem[]; minimaze: () => void; mini: boolean; } const SidebarTree: React.FC = ({ data, minimaze, mini }) => { const [currentPage, setCurrentPage] = useState(""); const local = useLocal({ data: data, ready: false as boolean, }); useEffect(() => { if (typeof location === "object") { const newPage = window.location.pathname; setCurrentPage(newPage); } const run = async () => { local.ready = false; local.render(); setTimeout(() => { local.ready = true; local.render(); }, 1000); }; if (typeof window === "object") { run(); } }, []); const isChildActive = (items: TreeMenuItem[]): boolean => { return items.some((item) => { if (item.href && currentPage.startsWith(item.href)) return true; if (item.children) return isChildActive(item.children); // Rekursif return false; }); }; const renderTree = (items: TreeMenuItem[], depth: number = 0) => { return items.map((item, index) => { const hasChildren = item.children && item.children.length > 0; const isActive = item.href && detectCase(currentPage, item.href); const isParentActive = hasChildren && isChildActive(item.children!); const [isOpen, setIsOpen] = useState(isParentActive); useEffect(() => { if (isParentActive) { setIsOpen(true); } }, [isParentActive]); const itemStyle = { paddingLeft: !mini ? `${depth * 16}px` : "0px", }; return ( {hasChildren ? (
  • { if (mini) { minimaze(); } setIsOpen(!isOpen); }} style={itemStyle} >
    {!depth ? (
    {item.icon}
    ) : ( <> )} {!mini ? ( <>
    {item.title}
    {isOpen ? : }
    ) : ( <> )}
    {renderTree(item.children!, depth + 1)}
    • ) : (
  • { if (item?.href) setCurrentPage(item.href); }} className={classNames( " flex-row flex items-center cursor-pointer items-center w-full rounded-lg text-base font-normal text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700 flex flex-row py-2.5 px-4", isActive ? " py-2.5 px-4 text-base font-normal text-dark-500 rounded-lg group shadow-[#31367875] transition-all duration-200 dark:bg-gray-700" : "", isActive ? !depth ? " bg-white shadow-md hover:bg-gray-200 hover:!bg-white " : "bg-gray-100" : "", css` & > span { white-space: wrap !important; } `, mini ? "px-0 py-2" : "" )} style={itemStyle} // Terapkan gaya berdasarkan depth >
    {!depth ? (
    {item.icon}
    ) : ( <> )} {!mini ? ( <>
    {item.title}
    ) : ( <> )}
    • )}     ); }); }; return (
    {/* {!local.ready ? (
    ) : ( )} */}
    {renderTree(data)}
    ); }; const BottomMenu: FC = function () { return (
    Settings page
    ); }; const LanguageDropdown: FC = function () { return ( Current language } > ); }; export default SidebarTree;