74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
|
import React, { useEffect, useState } from "react";
|
||
|
|
import clsx from "clsx";
|
||
|
|
import { Accordion, AccordionItem, Tooltip } from "@nextui-org/react";
|
||
|
|
|
||
|
|
import { ChevronUpIcon } from "../icons";
|
||
|
|
import { DashboardIcon, HomeIcon, TableIcon } from "../icons/sidebar-icon";
|
||
|
|
import { useSidebar } from "./sidebar-context";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
icon?: string;
|
||
|
|
title: string;
|
||
|
|
items?: React.ReactNode[];
|
||
|
|
isActive: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const SidebarCollapseItems = ({
|
||
|
|
title,
|
||
|
|
items,
|
||
|
|
icon,
|
||
|
|
isActive,
|
||
|
|
}: Props) => {
|
||
|
|
|
||
|
|
const { isOpen, toggleSidebar } = useSidebar();
|
||
|
|
|
||
|
|
// useEffect(() => {
|
||
|
|
// console.log("Sidebar Collapse Item :: ", title, isActive);
|
||
|
|
// }, []);
|
||
|
|
|
||
|
|
const renderIcon = () => {
|
||
|
|
switch (icon) {
|
||
|
|
case 'dashboard':
|
||
|
|
return <DashboardIcon />;
|
||
|
|
case 'menu1':
|
||
|
|
return <HomeIcon />;
|
||
|
|
case 'table':
|
||
|
|
return <TableIcon />;
|
||
|
|
default:
|
||
|
|
return null; // Tidak ada ikon yang sesuai
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`flex gap-4 h-full items-center cursor-pointer rounded-lg ${isActive ? `bg-zinc-600 dark:bg-zinc-300 ${isOpen ? "max-w-[253px]" : "max-w-[48px]"} ` : ""
|
||
|
|
} `}
|
||
|
|
>
|
||
|
|
<Accordion className={`${isOpen ? "pr-4 pl-0" : "pl-0 pr-4"} `} defaultExpandedKeys={isActive ? [title] : ""}>
|
||
|
|
<AccordionItem
|
||
|
|
key={title}
|
||
|
|
indicator={<ChevronUpIcon />}
|
||
|
|
classNames={{
|
||
|
|
// indicator: "data-[open=true]:-rotate-180",
|
||
|
|
indicator: `${isOpen ? "data-[open=true]:-rotate-180" : "hidden"}`,
|
||
|
|
trigger: `${isOpen ? "pl-[7px]" : "pl-[11px] "} py-2 rounded-lg active:scale-[0.98] transition-transform text-center ${isActive ? "bg-zinc-600 dark:bg-zinc-300 text-zinc-300 dark:text-zinc-500 font-bold font-bold hover:font-bold" : " hover:bg-zinc-400 hover:font-semibold"}`,
|
||
|
|
title: `${isOpen ? "pl-2 gap-2" : "px-0"} flex text-base h-full items-center cursor-pointer`,
|
||
|
|
}}
|
||
|
|
aria-label="Accordion 1"
|
||
|
|
title={
|
||
|
|
<div className={`w-full ${isActive ? "text-zinc-300 dark:text-zinc-600" : " !text-zinc-600 dark:!text-zinc-400"} flex flex-row ${isOpen && 'gap-2'} `}>
|
||
|
|
{icon && <span className={isOpen ? "pl-[1px]" : "self-center pl-0"}>{icon}</span>}
|
||
|
|
{/* {isOpen && <span>{title}</span>} */}
|
||
|
|
{isOpen && <span>{title}</span>}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<div className={`border-zinc-500 dark:border-zinc-600 ${isOpen ? "ml-6 border-l-1" : "border-none"}`}>
|
||
|
|
<ul className=" overflow-hidden">{items}</ul>
|
||
|
|
</div>
|
||
|
|
</AccordionItem>
|
||
|
|
</Accordion>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|