56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import { DashboardIcon, HomeIcon, TableIcon } from "../../icons/sidebar-icon";
|
|
import { useSidebar } from "./sidebar-context";
|
|
import { Tooltip } from "@nextui-org/react";
|
|
|
|
export default function ClosedSidebarIcon(props: {
|
|
icon: string;
|
|
isActive: boolean;
|
|
childMenu: any;
|
|
path: string;
|
|
title: string;
|
|
}) {
|
|
const { isOpen, toggleSidebar } = useSidebar();
|
|
|
|
const { icon, isActive, childMenu, path, title } = props;
|
|
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 (
|
|
<Tooltip content={title} placement="right" delay={0} closeDelay={0}>
|
|
{childMenu.length < 1 ? (
|
|
<Link
|
|
href={path}
|
|
className={`w-fit rounded-lg p-1 flex items-center ${
|
|
isActive
|
|
? "bg-[#11181c] dark:bg-white text-[#fafafa] dark:text-black"
|
|
: "text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 hover:dark:text-zinc-300"
|
|
}`}
|
|
>
|
|
{renderIcon()}
|
|
</Link>
|
|
) : (
|
|
<a
|
|
onClick={toggleSidebar}
|
|
className={`cursor-pointer w-fit rounded-lg p-1 flex items-center ${
|
|
isActive
|
|
? "bg-[#11181c] dark:bg-white text-[#fafafa] dark:text-black"
|
|
: "text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 hover:dark:text-zinc-300"
|
|
}`}
|
|
>
|
|
{renderIcon()}
|
|
</a>
|
|
)}
|
|
</Tooltip>
|
|
);
|
|
}
|