48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React from "react";
|
|
|
|
interface MenuItem {
|
|
name: string;
|
|
componentKey: string;
|
|
}
|
|
|
|
const menuItems: MenuItem[] = [
|
|
{ name: "Moons", componentKey: "stakingsourcesview" },
|
|
{ name: "Inventory", componentKey: "inventoryitemview" },
|
|
{ name: "Buy Items", componentKey: "storeitemview" },
|
|
{ name: "Sell Resources", componentKey: "resourcestore" },
|
|
];
|
|
|
|
interface NavbarProps {
|
|
onMenuItemClick: (componentKey: string) => void;
|
|
activeItem: string;
|
|
}
|
|
|
|
const NavbarVertical: React.FC<NavbarProps> = ({
|
|
onMenuItemClick,
|
|
activeItem,
|
|
}) => {
|
|
return (
|
|
<div className="">
|
|
<nav className="border-2 border-white rounded-lg p-8 h-auto">
|
|
<ul className="">
|
|
{menuItems.map((item) => (
|
|
<li
|
|
key={item.componentKey}
|
|
className={`text-white cursor-pointer mb-1 ${
|
|
item.componentKey === activeItem
|
|
? "text-3xl font-bold"
|
|
: "text-2xl"
|
|
}`}
|
|
onClick={() => onMenuItemClick(item.componentKey)}
|
|
>
|
|
{item.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NavbarVertical;
|