init project

docs/data/joy/components/menu/SelectedMenu.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import MenuButton from '@mui/joy/MenuButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import Apps from '@mui/icons-material/Apps';
+import Dropdown from '@mui/joy/Dropdown';
+
+export default function SelectedMenu() {
+  const [selectedIndex, setSelectedIndex] = React.useState(1);
+
+  const createHandleClose = (index) => () => {
+    if (typeof index === 'number') {
+      setSelectedIndex(index);
+    }
+  };
+
+  return (
+    <Dropdown>
+      <MenuButton startDecorator={<Apps />}>Apps</MenuButton>
+      <Menu>
+        <MenuItem
+          {...(selectedIndex === 0 && { selected: true, variant: 'soft' })}
+          onClick={createHandleClose(0)}
+        >
+          Random project
+        </MenuItem>
+        <MenuItem selected={selectedIndex === 1} onClick={createHandleClose(1)}>
+          Production - web
+        </MenuItem>
+        <MenuItem selected={selectedIndex === 2} onClick={createHandleClose(2)}>
+          Staging - web
+        </MenuItem>
+      </Menu>
+    </Dropdown>
+  );
+}