Menus
Menus are much harder to work with than many other components because the popup part needs to appear in front of everything else and this can be surprisingly complex implement. For that reason, we have left our implementation relatively rather simple. For a more complex and robust menu, we would probably save time and utilise a component library like
shadcn/ui
.
A basic Menu.
View
export const demoMenuChoiceOptions: MenuChoiceOption[] = [
  {
    type: "heading",
    title: "File",
    subMenu: [
      {
        type: "button",
        title: "New",
        onClick: () => {},
      },
      ...
    ],
  },
  {
    type: "heading",
    title: "Edit",
    subMenu: [
      {
        type: "button",
        title: "Undo",
        onClick: () => {},
      },
      ...
    ],
  },
  {
    type: "heading",
    title: "View",
    disabled: true,
    subMenu: [],
  },
  {
    type: "heading",
    title: "Help",
    subMenu: [
      {
        title: "About",
        href: "/about",
      },
      {
        title: "Submenus",
        href: "/",
        subMenu: [
          { title: "Sub 1", href: "/" },
          {
            title: "Sub 2",
            href: "/",
            subMenu: [
              { title: "Sub-Sub 1", href: "/" },
              { title: "Sub-Sub 2", href: "/" },
              { title: "Sub-Sub 3", href: "/" },
            ],
          },
          { title: "Sub 3", href: "/" },
        ],
      },
    ],
  },
];

...

<Menu menuChoiceOptions={demoMenuChoiceOptions} isLoggedIn={false} />

FUTORO