Material UI：带有可展开侧边菜单的抽屉式导航栏

Question

使用Material UI，如何构建具有可展开菜单项的抽屉，就像material-ui.com网站上的那个一样？

所以我想要这样的东西： 每个菜单项（加粗）可以展开以显示子菜单项。

如何使用Material UI实现这一点？

- etayluz

---

这可能会有所帮助。material-ui网站应用抽屉的源代码。https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/AppDrawer.js - REDDY PRASAD

我在Material UI网站上没有找到AppDrawerNavItem API。您能否在codesandbox.io上提供一个工作示例或其他方式？ - etayluz

AppDrawerNavItem 是自定义组件。您可以在与 AppDrawer 相同的目录中找到它。抱歉没有实时示例 :( https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/AppDrawerNavItem.js - REDDY PRASAD

请问您能否提供一个可用的示例？ - etayluz

抱歉之前给你带来了误导。这与“应用抽屉（AppDrawer）”无关，和它有关的是“列表（Lists）”文档：https://material-ui.com/demos/lists/，在线示例链接为：https://codesandbox.io/s/6xo0nlxn8k。 - REDDY PRASAD

Answer 1

你需要一个打开和关闭折叠的功能。

const [openCollapse, setOpenCollapse] = React.useState(false);    
 
function handleOpenSettings(){
    setOpenCollapse(!openCollapse);
}

return(
        <Drawer>
            <ListItem button onClick={handleOpenSettings}>
              <ListItemIcon>
                <Settings />
              </ListItemIcon>
              <ListItemText primary="Settings" />
              {openCollapse ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={openCollapse} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemIcon>
                  <Settings />
                </ListItemIcon>
                <ListItemText inset primary="Starred" />
              </ListItem>
            </List>
          </Collapse>
        </Drawer>
)

DEMO https://material-ui.com/components/lists/#simple-list

- Adriano Chiliseo

---

谢谢，这是一个非常有用的链接，可以解决其他相关问题。 - Rusty