102 lines
3.0 KiB
TypeScript
102 lines
3.0 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>
|
||
|
|
);
|
||
|
|
};
|