MUI公式のコードはとても綺麗でよいのですが、一方で装飾が多くパッと見でよく分からないのでシンプルな形にしました。

前提

• next: 14.2.5
• mui/material: 5.16.4

コード

"use client";

import {
  Drawer,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
} from "@mui/material";

export default function SideBar() {
  // ListItemButtonクリック時の挙動
  const onClickItem = (text: string) => {
    console.log("text", text);
  };

  return (
    <Drawer variant="permanent"
     sx={{
        width: drawerWidth,
        flexShrink: 0,
        [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: "border-box" },
      }}
    >
      <List>
        {["Dashboard", "Tables", "Maps", "Pages"].map((text, _index) => (
          <ListItem key={text} disablePadding>
            <ListItemButton
              onClick={() => {
                onClickItem(text);
              }}
            >
              <ListItemText primary={text} />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
    </Drawer>
  );
}

結果