CODEWITHSUNDEEP
reactjsmaterial-ui
Pak Developer
Pak Developer

Reputation: 93

Nested drawer in material-ui reactjs

I'm using material ui in Reactjs. I'm looking for nested drawer. Here is an example of this

Nested Drawer

I see there are some drawer available in material ui site. But no one is doing what I want. can you please let me know how can i create like this.

Upvotes: 3

Views: 8414

Answers (1)

Alkesh Desai
Alkesh Desai

Reputation: 96

You can recreat this functionality on your own by show drawer content conditionally.

Visit https://codesandbox.io/s/silly-star-s8oje?file=/src/App.js for live demo example or you can find code here:

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  }
});

export default function TemporaryDrawer() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    top: false,
    left: false,
    bottom: false,
    right: false
  });

  const toggleDrawer = (anchor, open) => event => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const [menuName, setMenuName] = React.useState(null);

  const mainMenuListArr = ["a", "b", "c"];

  const subMenuObj = {
    a: ["a.1", "a.2", "a.3"],
    b: ["b.1", "b.2", "b.3"],
    c: ["c.1", "c.2", "c.3"]
  };

  const list = anchor => {
    let arr = menuName ? subMenuObj[menuName] : mainMenuListArr;
    const clickListener = text => {
      if (!menuName) {
        return setMenuName(text);
      } else {
        return alert(`${text} clicked`);
      }
    };
    return (
      <div
        className={clsx(classes.list, {
          [classes.fullList]: anchor === "top" || anchor === "bottom"
        })}
        role="presentation"
        onKeyDown={toggleDrawer(anchor, false)}
      >
        <List>
          {arr.map((text, index) => (
            <ListItem button key={text} onClick={() => clickListener(text)}>
              <ListItemText primary={text} />
              {!menuName && <ChevronRightIcon />}
            </ListItem>
          ))}
        </List>
      </div>
    );
  };

  return (
    <div>
      {["left", "right", "top", "bottom"].map(anchor => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
          <Drawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            {menuName && (
              <ListItem button onClick={() => setMenuName(null)}>
                <ListItemText primary="Back to main menu" />
                <ChevronLeftIcon />
              </ListItem>
            )}
            {list(anchor)}
          </Drawer>
        </React.Fragment>
      ))}
    </div>
  );
}

Upvotes: 8

Related Questions