next-web/src/components/SideNav.tsx

"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,
        {
            "w-[6vw] lg:w-[5vw]" : !isSidebarOpen,
            "w-[13vw] lg:w-[11vw]" : 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">
            {navItems.map((navItem, index) => (
                <a href={navItem.url} className={classnames(
                    "w-full h-20 flex justify-center items-center px-1 text-xs md:text-sm lg:text-base font-semibold hover:text-platinum",
                    {"bg-bluetang text-platinum" : index == 0}
                )}>
                    {isSidebarOpen ? (
                        <>{navItem.title}</>
                    ) : (
                        <DynamicIcon iconName={navItem.iconName} size={30} />
                    )}
                </a> 
            ))}
        </div>
    </div>
  );
}

export default SideNav;