feat(component): add <MegaMenu/> (#1331)

This time, use the new monorepo!

Author: tulup-conner

apps/web/content/docs/components/mega-menu.mdx

@@ -0,0 +1,55 @@
+---
+title: React Mega Menu - Flowbite
+description: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.
+---
+
+The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.
+
+To start using the mega menu component you need to import it from `flowbite-react`:
+
+```jsx
+import { MegaMenu } from "flowbite-react";
+```
+
+## Default mega menu
+
+Use this example to show a list of links aligned on three columns inside the mega menu dropdown.
+
+<Example name="megaMenu.root" />
+
+## Mega menu with icons
+
+This example of a mega menu dropdown can be used to also show an icon near the text of the link.
+
+<Example name="megaMenu.icons" />
+
+## Full width dropdown
+
+Use this example to show a mega menu dropdown that spans the entire width of the document page.
+
+<Example name="megaMenu.fullWidth" />
+
+## Full width with CTA
+
+This example can be used to also show a CTA button or link next to the menu items inside the dropdown.
+
+<Example name="megaMenu.fullWidthCTA" />
+
+## Full width with image
+
+This example can be used to also show a CTA with a background image inside the dropdown next to the other menu items and links.
+
+<Example name="megaMenu.fullWidthImage" />
+
+## Theme
+
+Note:
+
+- `<MegaMenu>`'s theme has all of the same options as [`<Navbar>`](https://flowbite-react.com/docs/components/navbar)'s, with slightly different defaults
+- `<MegaMenu.Dropdown toggle={..} />`'s theme, `megaMenu.dropdown.toggle`, is identical to [`<Dropdown>`](https://flowbite-react.com/docs/components/dropdown), with slightly different defaults
+
+<Theme name="megaMenu" />
+
+## References
+
+- [Flowbite Mega Menu](https://flowbite.com/docs/components/mega-menu/)

apps/web/data/docs-sidebar.ts

@@ -70,6 +70,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [
       { title: "Forms", href: "/docs/components/forms" },
       { title: "KBD", href: "/docs/components/kbd", isNew: true },
       { title: "List group", href: "/docs/components/list-group" },
+      { title: "Mega menu", href: "/docs/components/mega-menu", isNew: true },
       { title: "Modal", href: "/docs/components/modal" },
       { title: "Navbar", href: "/docs/components/navbar" },
       { title: "Pagination", href: "/docs/components/pagination" },

apps/web/examples/index.ts

@@ -19,6 +19,7 @@ export * as forms from "./forms";
 export * as kbd from "./kbd";
 export * as list from "./list";
 export * as listGroup from "./listGroup";
+export * as megaMenu from "./megaMenu";
 export * as modal from "./modal";
 export * as navbar from "./navbar";
 export * as pagination from "./pagination";

apps/web/examples/megaMenu/index.ts

@@ -0,0 +1,5 @@
+export { root } from "./megaMenu.root";
+export { icons } from "./megaMenu.icons";
+export { fullWidth } from "./megaMenu.fullWidth";
+export { fullWidthCTA } from "./megaMenu.fullWidthCTA";
+export { fullWidthImage } from "./megaMenu.fullWidthImage";