65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, ComponentType } from 'react';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
|
||
|
|
import DynamicIcon from './DynamicIcon';
|
||
|
|
import { NavItems } from '@/lib/dashboard';
|
||
|
|
|
||
|
|
import { FaArrowCircleLeft, FaArrowCircleRight } from "react-icons/fa";
|
||
|
|
import { TbCircleArrowLeft, TbCircleArrowRight } from "react-icons/tb";
|
||
|
|
import { PiBreadFill } from "react-icons/pi";
|
||
|
|
|
||
|
|
import Button from './Button';
|
||
|
|
|
||
|
|
|
||
|
|
interface SideNavProps {
|
||
|
|
maxWidth: string;
|
||
|
|
bgColor: string;
|
||
|
|
navItems: NavItems[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const SideNav: React.FC<SideNavProps> = (
|
||
|
|
{
|
||
|
|
maxWidth,
|
||
|
|
bgColor,
|
||
|
|
navItems
|
||
|
|
}
|
||
|
|
) => {
|
||
|
|
|
||
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classnames(
|
||
|
|
"relative h-full flex flex-col text-deepcove text-center transition-all duration-500",
|
||
|
|
bgColor, maxWidth,
|
||
|
|
{
|
||
|
|
"w-16" : !isSidebarOpen,
|
||
|
|
}
|
||
|
|
|
||
|
|
)}>
|
||
|
|
<div className="h-25" />
|
||
|
|
<Button
|
||
|
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||
|
|
className="h-10 flex justify-end items-center pr-2"
|
||
|
|
>
|
||
|
|
{isSidebarOpen ? <FaArrowCircleLeft size={30} /> : <FaArrowCircleRight size={30} />}
|
||
|
|
</Button>
|
||
|
|
<div className="flex flex-col divide-y divide-bluetang"></div>
|
||
|
|
{navItems.map((navItem, index) => (
|
||
|
|
<a href={navItem.url} className={classnames(
|
||
|
|
"w-full h-20 flex justify-center items-center hover:text-platinum",
|
||
|
|
{"bg-bluetang text-platinum" : index == 0}
|
||
|
|
)}>
|
||
|
|
{isSidebarOpen ? (
|
||
|
|
<>{navItem.title}</>
|
||
|
|
) : (
|
||
|
|
<DynamicIcon iconName={navItem.iconName} size={30} />
|
||
|
|
)}
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SideNav;
|