141 lines
7.1 KiB
TypeScript
141 lines
7.1 KiB
TypeScript
// import { useState } from "react";
|
|
// import { IoIosArrowRoundForward } from "react-icons/io";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
|
|
interface NavLinkProps {
|
|
to: string;
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
showSideBar: boolean;
|
|
menuPathMap: Record<string, string>;
|
|
}
|
|
|
|
// enum TransactionFilterEnum {
|
|
// ALL,
|
|
// DRAFT,
|
|
// SENT,
|
|
// COMPLETE,
|
|
// DECLINED,
|
|
// DISCARDED,
|
|
// CANCELED,
|
|
// EXPIRED
|
|
// }
|
|
|
|
const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPathMap }) => {
|
|
|
|
const location = useLocation();
|
|
const isActive = menuPathMap[location.pathname] === label;
|
|
|
|
// const [transactionFilter, setTransationFilter] = useState<TransactionFilterEnum>(TransactionFilterEnum.ALL)
|
|
|
|
return (
|
|
<>
|
|
|
|
<Link
|
|
to={to}
|
|
className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--sidebarMenuCol)]'}
|
|
p-2 rounded-md flex justify-left gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
>
|
|
{icon}
|
|
{showSideBar && <p className="text-[0.8rem]">{label}</p>}
|
|
</Link>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default NavLink;
|
|
|
|
|
|
// {label === "Transactions" ? <div>
|
|
// <Link
|
|
// to={to + "/all"}
|
|
// className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'}
|
|
// p-2 rounded-md flex justify-left gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// >
|
|
// {icon}
|
|
// {showSideBar && <p className="text-[0.8rem]">{label}</p>}
|
|
// </Link>
|
|
|
|
// <div
|
|
// className={`${showSideBar ? "pl-6" : ""} mt-0.5 overflow-hidden transition-all duration-300 ease-in-out transform ${isActive ? 'max-h-max opacity-100 translate-y-0' : 'max-h-0 opacity-0 -translate-y-2'
|
|
// }`}
|
|
// >
|
|
// <Link
|
|
// to={to + "/all"}
|
|
// className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.ALL ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.ALL)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">All</p>}
|
|
// {transactionFilter === TransactionFilterEnum.ALL && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
// <Link
|
|
// to={to + "/draft"}
|
|
// className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.DRAFT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.DRAFT)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Draft</p>}
|
|
// {transactionFilter === TransactionFilterEnum.DRAFT && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
// <Link
|
|
// to={to + "/sent"}
|
|
// className={`px-2 py-1 mt-1 ${transactionFilter === TransactionFilterEnum.SENT ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.SENT)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Sent</p>}
|
|
// {transactionFilter === TransactionFilterEnum.SENT && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
// <Link
|
|
// to={to + "/complete"}
|
|
// className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.COMPLETE ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.COMPLETE)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Completed</p>}
|
|
// {transactionFilter === TransactionFilterEnum.COMPLETE && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
// <Link
|
|
// to={to + "/declined"}
|
|
// className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DECLINED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.DECLINED)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Declined</p>}
|
|
// {transactionFilter === TransactionFilterEnum.DECLINED && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
|
|
// <Link
|
|
// to={to + "/discarded"}
|
|
// className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.DISCARDED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.DISCARDED)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Discarded</p>}
|
|
// {transactionFilter === TransactionFilterEnum.DISCARDED && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
|
|
// <Link
|
|
// to={to + "/canceled"}
|
|
// className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.CANCELED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.CANCELED)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Canceled</p>}
|
|
// {transactionFilter === TransactionFilterEnum.CANCELED && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
|
|
// <Link
|
|
// to={to + "/expired"}
|
|
// className={`px-2 py-1 my-1 ${transactionFilter === TransactionFilterEnum.EXPIRED ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} rounded-md flex justify-between gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
|
|
// onClick={() => setTransationFilter(TransactionFilterEnum.EXPIRED)}
|
|
// >
|
|
// {showSideBar && <p className="text-[0.8rem]">Expired</p>}
|
|
// {transactionFilter === TransactionFilterEnum.EXPIRED && <IoIosArrowRoundForward />}
|
|
// </Link>
|
|
|
|
|
|
// </div>
|
|
// </div> :
|