50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import {Props} from "@/types/types";
|
|
import Button from "@/components/common/button";
|
|
|
|
export default function SidebarItem({ item }: Props) {
|
|
const [open, setOpen] = useState(item.title === "Overview");
|
|
|
|
return (
|
|
<div className=" border-b border-slate-800 ">
|
|
<Button
|
|
onClick={() => setOpen(!open)}
|
|
className="flex w-full items-center justify-between
|
|
px-3 py-4 hover:bg-slate-900"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<item.icon size={16} />
|
|
|
|
<span className="text-base">{item.title}</span>
|
|
</div>
|
|
|
|
<ChevronDown
|
|
size={16}
|
|
className={`transition-transform ${
|
|
open ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</Button>
|
|
|
|
{open && item.children.length > 0 && (
|
|
<div className="ml-4 border-l border-slate-700 pl-2 pb-1">
|
|
{item.children.map((child: any) => (
|
|
<Link
|
|
key={child.title}
|
|
href={child.href}
|
|
className="group mt-2 flex items-center gap-3 rounded-lg px-2 py-2 text-slate-300 hover:bg-teal-500/20 hover:text-teal-400"
|
|
>
|
|
<child.icon size={16} />
|
|
|
|
<span>{child.title}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |