init project

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

@@ -0,0 +1,39 @@
+import List from '@mui/joy/List';
+import ListItem from '@mui/joy/ListItem';
+import MenuList from '@mui/joy/MenuList';
+import MenuItem from '@mui/joy/MenuItem';
+import Typography from '@mui/joy/Typography';
+
+export default function MenuListGroup() {
+  return (
+    <MenuList
+      component="div"
+      variant="outlined"
+      size="sm"
+      sx={{
+        boxShadow: 'sm',
+        flexGrow: 0,
+        minWidth: 200,
+        maxHeight: 240,
+        overflow: 'auto',
+      }}
+    >
+      {[...Array(5)].map((_, categoryIndex) => (
+        <List key={categoryIndex}>
+          <ListItem sticky>
+            <Typography
+              id={`sticky-list-demo-${categoryIndex}`}
+              level="body-xs"
+              sx={{ textTransform: 'uppercase', fontWeight: 'lg' }}
+            >
+              Category {categoryIndex + 1}
+            </Typography>
+          </ListItem>
+          {[...Array(10)].map((__, index) => (
+            <MenuItem key={index}>Action {index + 1}</MenuItem>
+          ))}
+        </List>
+      ))}
+    </MenuList>
+  );
+}