97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { Transition } from "@headlessui/react";
|
|
import cs from "classnames";
|
|
|
|
import { useApp } from "../../contexts/AppProvider";
|
|
|
|
type MenuItem = {
|
|
label: string;
|
|
path: string;
|
|
};
|
|
|
|
const MenuItems: MenuItem[] = [
|
|
{
|
|
label: "Posições",
|
|
path: "/",
|
|
},
|
|
{
|
|
label: "Minhas Posições",
|
|
path: "/dashboard",
|
|
},
|
|
{
|
|
label: "Pedidos de Investimentos",
|
|
path: "/orders/stake",
|
|
},
|
|
{
|
|
label: "Carteira",
|
|
path: "/wallet",
|
|
},
|
|
{
|
|
label: "Pedidos de Troca",
|
|
path: "/orders/exchange",
|
|
},
|
|
{
|
|
label: "Pedidos de Depósito",
|
|
path: "/orders/deposit",
|
|
},
|
|
];
|
|
|
|
export const SideNav = () => {
|
|
const { sideNavExpanded, setSideNavExpanded } = useApp();
|
|
const location = useLocation();
|
|
|
|
const handleCloseSideNav = () => {
|
|
setSideNavExpanded(false);
|
|
};
|
|
|
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
|
|
if (e.key === "Escape") {
|
|
handleCloseSideNav();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Transition
|
|
show={sideNavExpanded}
|
|
className="z-30"
|
|
enter="transition-opacity duration-500"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="transition-opacity duration-500"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0"
|
|
>
|
|
<div
|
|
role="none"
|
|
onKeyPress={handleKeyPress}
|
|
onClick={handleCloseSideNav}
|
|
className="xl:hidden absolute w-full h-full bg-black bg-opacity-60"
|
|
/>
|
|
</Transition>
|
|
<aside
|
|
className={`bg-white w-4/6 md:w-2/6 lg:w-1/6 overflow-hidden absolute min-h-full drop-shadow-xl drop border-r border-gray-200 z-40 transition-all duration-500 xl:transition-none xl:mx-0 xl:static ${
|
|
sideNavExpanded ? "mx-0" : "-mx-full"
|
|
}`}
|
|
>
|
|
<ul>
|
|
{MenuItems.map((item) => (
|
|
<Link to={item.path} key={item.label}>
|
|
<li
|
|
key={item.label}
|
|
className={cs(
|
|
"text-xl p-4 px-8 hover:bg-gray-100 cursor-pointer",
|
|
location.pathname === item.path ? "bg-gray-200" : ""
|
|
)}
|
|
>
|
|
{item.label}
|
|
</li>
|
|
</Link>
|
|
))}
|
|
</ul>
|
|
</aside>
|
|
</>
|
|
);
|
|
};
|