36 lines
981 B
TypeScript
36 lines
981 B
TypeScript
|
import React from "react";
|
||
|
|
import {classes, Modify} from "../../Utils";
|
||
|
|
import {SubmenuFloat} from "./SubmenuFloat";
|
||
|
|
|
||
|
|
export type MainMenuItemProperties = React.PropsWithChildren<Modify<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
|
||
|
|
}>>;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Main component of a main menu item.
|
||
|
|
*/
|
||
|
|
export const MainMenuItem = React.forwardRef<HTMLAnchorElement, MainMenuItemProperties>(function SubmenuItem({children, ...props}: MainMenuItemProperties, ref)
|
||
|
|
{
|
||
|
|
return (
|
||
|
|
<li>
|
||
|
|
<a ref={ref} {...props}>{children}</a>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A main menu item that open a submenu.
|
||
|
|
*/
|
||
|
|
export function MainMenuItemSubmenu({submenu, className, children, ...props}: Modify<MainMenuItemProperties, {
|
||
|
|
/**
|
||
|
|
* The submenu content.
|
||
|
|
*/
|
||
|
|
submenu: React.ReactNode;
|
||
|
|
}>)
|
||
|
|
{
|
||
|
|
return (
|
||
|
|
<SubmenuFloat submenu={submenu} role={"menu"} floatingOptions={{ placement: "bottom-start" }}>
|
||
|
|
<MainMenuItem className={classes("submenu", className)} {...props}>{children}</MainMenuItem>
|
||
|
|
</SubmenuFloat>
|
||
|
|
);
|
||
|
|
}
|