96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Accordion, AccordionItem, Tooltip } from "@nextui-org/react";
|
|
import clsx from "clsx";
|
|
import Link from "next/link";
|
|
import { ChevronUpIcon } from "../icons";
|
|
import { Submenu1Icon, Submenu2Icon } from "../icons/sidebar-icon";
|
|
import { useSidebar } from "./sidebar-context";
|
|
|
|
interface SubSubItems {
|
|
title: string;
|
|
path: string;
|
|
isSubActive: boolean;
|
|
}
|
|
|
|
interface SubItems {
|
|
title: string;
|
|
path: string;
|
|
isActive: boolean;
|
|
isSubActive: boolean;
|
|
subItems?: SubSubItems[];
|
|
}
|
|
|
|
interface Props {
|
|
title: string;
|
|
icon?: any;
|
|
path: string;
|
|
isActive: boolean;
|
|
isParentActive: boolean;
|
|
}
|
|
|
|
export const SidebarCollapseSubItems = ({
|
|
title,
|
|
icon,
|
|
path,
|
|
isActive,
|
|
isParentActive,
|
|
}: Props) => {
|
|
const [open, setOpen] = useState(false);
|
|
let no = 0;
|
|
|
|
// useEffect(() => {
|
|
// console.log("Sidebar Collapse Sub Item :: ", title, path, isParentActive, isActive, icon);
|
|
// }, []);
|
|
|
|
const { isOpen, toggleSidebar } = useSidebar();
|
|
|
|
const renderIcon = () => {
|
|
switch (icon) {
|
|
case 'submenu1':
|
|
return <Submenu1Icon size={16} />;
|
|
case 'submenu2':
|
|
return <Submenu2Icon size={16} />;
|
|
default:
|
|
return null; // Tidak ada ikon yang sesuai
|
|
}
|
|
};
|
|
return (
|
|
<li key={`${title}-${(no += 1)}`}>
|
|
|
|
{isOpen ?
|
|
<Link
|
|
href={path}
|
|
>
|
|
<div
|
|
className={`flex items-center min-h-[36px] rounded-md py-1 text-sm
|
|
${isOpen ? "px-3.5" : "px-0"}
|
|
${isParentActive ? "text-zinc-300 dark:text-zinc-500 hover:text-zinc-200 dark:hover:text-zinc-600" : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"}
|
|
${isActive ? "font-bold hover:font-bold !text-zinc-100 dark:!text-zinc-600" : "hover:font-semibold"
|
|
}`}
|
|
>
|
|
<span className={`${isOpen ? "pl-3" : "pl-0"} pr-0 flex flex-row gap-2`}>{icon} {isOpen && title}</span>
|
|
</div>
|
|
</Link>
|
|
:
|
|
<Tooltip content={title} delay={0} closeDelay={0} placement="right">
|
|
<Link
|
|
href={path}
|
|
>
|
|
<div
|
|
className={`flex justify-center min-h-[36px] rounded-md py-1 text-sm
|
|
${isOpen ? "px-3.5" : "px-0"}
|
|
${isParentActive ? "text-zinc-300 dark:text-zinc-500 hover:text-zinc-200 dark:hover:text-zinc-600" : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300"}
|
|
${isActive ? "font-bold hover:font-bold !text-zinc-100 dark:!text-zinc-600" : "hover:font-semibold"
|
|
}`}
|
|
>
|
|
<span className={`${isOpen ? "pl-3" : `${isParentActive ? "pl-3" : "pl-0"}`} pr-0 flex flex-row`}>{icon} {isOpen && title}</span>
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
|
|
}
|
|
|
|
</li>
|
|
);
|
|
};
|