chore(website): Add demo for rendering DropdownMenus as a Grid

Author: mlaursen

packages/documentation/src/components/Demos/Menu/DropdownMenuGrid.md

@@ -0,0 +1,2 @@
+This example shows you how you create a `DropdownMenu` that displays the
+`MenuItem` in a grid using the `listClassName` prop and a few custom styles.

packages/documentation/src/components/Demos/Menu/DropdownMenuGrid.module.scss

@@ -0,0 +1,27 @@
+@use 'react-md' as *;
+
+.grid {
+  // since the icons are stacked, set the menu icon spacing back to the default
+  // icon spacing
+  @include rmd-menu-theme-update-var(icon-spacing, $rmd-icon-spacing-with-text);
+
+  display: grid;
+  gap: 0.25rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 0.5rem;
+}
+
+.item {
+  flex-direction: column;
+  text-align: center;
+}
+
+.separator {
+  grid-column-end: span 3;
+  margin-top: 0.5rem;
+}
+
+.all {
+  grid-column-end: span 3;
+  text-align: center;
+}

packages/documentation/src/components/Demos/Menu/DropdownMenuGrid.tsx

@@ -0,0 +1,61 @@
+import type { ReactElement, ReactNode } from "react";
+import { AppBar, useActionClassName } from "@react-md/app-bar";
+import { TextIconSpacing } from "@react-md/icon";
+import {
+  AppsSVGIcon,
+  SaveSVGIcon,
+  SchoolSVGIcon,
+  SdCardSVGIcon,
+  ShoppingBasketSVGIcon,
+  ShopSVGIcon,
+  ShowChartSVGIcon,
+  SpaSVGIcon,
+  StorageSVGIcon,
+  SubwaySVGIcon,
+} from "@react-md/material-icons";
+import { DropdownMenu, MenuItem, MenuItemSeparator } from "@react-md/menu";
+
+import styles from "./DropdownMenuGrid.module.scss";
+
+interface GridItemProps {
+  icon: ReactNode;
+  children: ReactNode;
+}
+
+function GridMenuItem({ children, icon }: GridItemProps): ReactElement {
+  return (
+    <MenuItem className={styles.item} textChildren={false}>
+      <TextIconSpacing stacked icon={icon}>
+        {children}
+      </TextIconSpacing>
+    </MenuItem>
+  );
+}
+
+export default function DropdownMenuGrid(): ReactElement {
+  return (
+    <AppBar>
+      <DropdownMenu
+        id="grid-like-menu"
+        aria-label="Apps"
+        buttonType="icon"
+        buttonChildren={<AppsSVGIcon />}
+        renderAsSheet="phone"
+        listClassName={styles.grid}
+        className={useActionClassName({ first: true, last: true })}
+      >
+        <GridMenuItem icon={<ShopSVGIcon />}>App One</GridMenuItem>
+        <GridMenuItem icon={<ShowChartSVGIcon />}>App Two</GridMenuItem>
+        <GridMenuItem icon={<ShoppingBasketSVGIcon />}>App Three</GridMenuItem>
+        <GridMenuItem icon={<SpaSVGIcon />}>App Four</GridMenuItem>
+        <GridMenuItem icon={<SchoolSVGIcon />}>App Five</GridMenuItem>
+        <GridMenuItem icon={<SaveSVGIcon />}>App Six</GridMenuItem>
+        <GridMenuItem icon={<SdCardSVGIcon />}>App Seven</GridMenuItem>
+        <GridMenuItem icon={<SubwaySVGIcon />}>App Eight</GridMenuItem>
+        <GridMenuItem icon={<StorageSVGIcon />}>App Nine</GridMenuItem>
+        <MenuItemSeparator className={styles.separator} />
+        <MenuItem className={styles.all}>View All</MenuItem>
+      </DropdownMenu>
+    </AppBar>
+  );
+}

packages/documentation/src/components/Demos/Menu/index.tsx

@@ -34,6 +34,9 @@ import menusWithFormComponents from "./MenusWithFormComponents.md";
 import HoverableMenus from "./HoverableMenus";
 import hoverableMenus from "./HoverableMenus.md";
 
+import DropdownMenuGrid from "./DropdownMenuGrid";
+import dropdownMenuGrid from "./DropdownMenuGrid.md";
+
 const demos: DemoConfig[] = [
   {
     name: "Simple Example",
@@ -80,6 +83,12 @@ const demos: DemoConfig[] = [
     fullPageFAB: true,
     disableFullPageAppBar: true,
   },
+  {
+    name: "Dropdown Menu Grid",
+    description: dropdownMenuGrid,
+    children: <DropdownMenuGrid />,
+    disableCard: true,
+  },
 ];
 
 // demos will be wrapped with the IconProvider just in-case people inspect the DOM