54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
"use client";
|
|
import Link from "next/link";
|
|
import Logo from "./Logo";
|
|
import clsx from "clsx";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { useAtom } from "jotai";
|
|
import { linkTypeAtom } from "../_lib/atom";
|
|
import { LinkType } from "../_lib/data/linkType";
|
|
import Image from "next/image";
|
|
export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const [, setSelectType] = useAtom(linkTypeAtom)
|
|
|
|
return (
|
|
<div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh] bg-[#F9F9F9]">
|
|
<div className="bg-white shadow-sm">
|
|
<Logo />
|
|
</div>
|
|
<nav className="flex flex-col py-1">
|
|
{
|
|
linkList.map((item) => {
|
|
return (
|
|
item?.href ?
|
|
<Link className={clsx("cursor-pointer py-3 flex gap-x-2 items-center hover:bg-[#E0E0E0] rounded pl-3 hover:text-[#5961F9] text-[14px]",
|
|
pathname === item.href ? "text-[#5961F9]" : "text-[#515C6B]")
|
|
} href={item.href} key={item._id}>
|
|
{
|
|
item.iconElement
|
|
}
|
|
<span>{item.label}</span>
|
|
</Link> :
|
|
<div className="cursor-pointer py-3 flex gap-x-2 items-center hover:bg-[#E0E0E0] rounded pl-3 text-[#515C6B] hover:text-[#5961F9] text-[14px]" key={item._id}
|
|
onClick={() => {
|
|
|
|
if (pathname !== '/') {
|
|
router.replace('/')
|
|
}
|
|
setSelectType(item._id)
|
|
}}
|
|
>
|
|
<Image src={item.icon as string} className="w-[20px] h-[20px] object-cover" alt="" width={20} height={20} ></Image>
|
|
|
|
<span>{item.label}</span>
|
|
</div>
|
|
|
|
)
|
|
})
|
|
}
|
|
</nav>
|
|
|
|
</div >
|
|
)
|
|
} |