MaterialUI TypeScript: можно ли добавить многоуровневое меню навигации в «NavItem»?

Question

Как создать многоуровневое меню навигации с помощью MaterialUI и TypeScript? Я хотел бы добавить в '/questions' следующее меню навигации:2:

• /вопросы/Теги
• /вопросы/Пользователи

вроде как на скриншоте

      export function NavBar(...) {
  return (
    <>
      <Drawer>
        <List>
            <NavItem
              to="/questions"
              primary="questions"
              icon={CloudOff}
            />
          )}
          <NavItem to="/questions" primary="questions" icon={Window} />
        </List>
      </Drawer>
    </>
  );
}

Answer 1

Много возможностей...

Лучший способ подготовить массив с информацией о меню и картой, примерно так:

      const TestArea = ({ params }) => {
  const menu = [{ mainMenu: "tata", subMenu: ["toto", "titi"] }];
  return (
    <>
      <Toolbar
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
        }}
      >
        {menu.map((item) => {
          return (
            <>
              <Typography variant="overline">{item.mainMenu}</Typography>
              {item.subMenu.map((subItem) => {
                return (
                  <Typography variant="caption" style={{ marginLeft: "40%" }}>
                    {subItem}
                  </Typography>
                );
              })}
            </>
          );
        })}
      </Toolbar>
    </>
  );
};

С помощью этой базы вы можете настроить компонент по вашему выбору, визуализировать элемент, например ссылку, с путем к...

      Button color="inherit" component={Link} to="/classic">

Да, я знаю, это обычный JSX, а не TSX, это просто для примера. Если вам нужна дополнительная информация, скажите мне!