init project

docs/data/joy/components/menu/ControlledDropdown.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Dropdown from '@mui/joy/Dropdown';
+import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
+import MenuItem from '@mui/joy/MenuItem';
+
+export default function ControlledDropdown() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback(
+    (event: React.SyntheticEvent | null, isOpen: boolean) => {
+      setOpen(isOpen);
+    },
+    [],
+  );
+
+  return (
+    <Dropdown open={open} onOpenChange={handleOpenChange}>
+      <MenuButton>Dashboard...</MenuButton>
+      <Menu>
+        <MenuItem>Profile</MenuItem>
+        <MenuItem>My account</MenuItem>
+        <MenuItem>Logout</MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}