m3-academy-template-vtexio-.../custom/react/components/Menu/DynamicMenu.tsx
Caroline Moran f2a03c53ae first commit
2022-08-11 09:06:07 -04:00

78 lines
2.1 KiB
TypeScript

import React from "react";
import styles from "./DynamicMenu.css";
import { MenuDrawer } from "./MenuDrawer/MenuDrawer";
import { MenuItem } from "./MenuItem/MenuItem";
interface MenuSchema {
items: MenuItemInterface[];
isMobile: boolean;
}
export interface MenuItemInterface {
MenuItemProps: MenuItemProps;
}
export interface SubMenuItemProps {
iconSrc?: string;
title?: any;
href?: any;
internal: boolean;
highlight: boolean;
content?: any;
SubMenuItemProps?: SubMenuItemProps;
}
export interface MenuItemProps {
iconSrc?: string;
title?: string;
href?: string;
internal?: boolean;
content?: string;
items?: SubMenuItemProps[];
banner?: string;
bannerUrl?: string;
MenuItemProps?: MenuItemProps;
}
export const DynamicMenu: StorefrontFunctionComponent<MenuSchema> = (
props: MenuSchema
) => {
if (!props.items) return <></>;
if (props.isMobile) {
return (
<>
<MenuDrawer menuItems={props.items} />
</>
);
}
return (
<nav className={styles.nav}>
<ul className={styles.menu}>
{props.items.map((item, i) => {
if(!item) return <></>;
return (
<MenuItem
href={
item.MenuItemProps?.href
? item.MenuItemProps?.href
: ""
}
title={item.MenuItemProps?.title}
content={item.MenuItemProps?.content}
items={item.MenuItemProps?.items}
internal={item.MenuItemProps?.internal}
banner={item.MenuItemProps?.banner}
bannerUrl={item.MenuItemProps?.bannerUrl}
MenuItemProps={item}
key={i}
/>
);
})}
</ul>
</nav>
);
};
DynamicMenu.schema = {
title: "Menu Dinâmico",
};