d9fccb137e
* feat(simple-trading-app): add drawer component to ui-toolkit * feat(simple-trading-app): use drawer component and add navigation routes * feat(simple-trading-app): move drawer out of ui-toolkit and into simple trading * feat(simple-trading-app): remove suspense for now as nothing gets lazy loaded * feat(simple-trading-app): add simple market list into routes
39 lines
859 B
TypeScript
39 lines
859 B
TypeScript
import * as React from 'react';
|
|
import type { ReactElement } from 'react';
|
|
import { Button } from '@vegaprotocol/ui-toolkit';
|
|
import type { ButtonProps } from '@vegaprotocol/ui-toolkit';
|
|
|
|
type MenuItem = {
|
|
label: string;
|
|
component: ReactElement | ReactElement[];
|
|
onClick(): void;
|
|
active: boolean;
|
|
};
|
|
|
|
interface Props {
|
|
/**
|
|
* Menu items passed as an array
|
|
*/
|
|
menuItems: MenuItem[];
|
|
}
|
|
|
|
export const NavigationDrawerMenu = ({ menuItems }: Props) => {
|
|
return (
|
|
<ul>
|
|
{menuItems.map((item, index) => {
|
|
const btnProps = {
|
|
variant: item.active ? 'accent' : 'primary',
|
|
className: 'w-full mb-8',
|
|
onClick: item.onClick,
|
|
} as ButtonProps;
|
|
|
|
return (
|
|
<li key={index}>
|
|
<Button {...btnProps}>{item.label}</Button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
};
|