How can I make my menu look like a nested list

Question

I'm very new to React and admin-on-rest so I don't have such a solid baseknowledge yet, please be forgiving if it's a simple question.

How can I set my menu to look like a nested list? Currently I have a custom menu and inside this menu.js I set a MenuItem with menuItems inside it to make it nested, just like in the material-ui docs.

But it doesn't looks how I want, I would like to make a nested list and pass it as my menu, but I couldn't figure out how to do that with admin-on-rest docs.

score 3 · Accepted Answer · answered Dec 03 '17 at 07:45

I'm novice too and have just started learning React. I needed exactly what you've asked and here's what I came up with. Please note, it might not fit React/AOR best practices as I am still learning. Sorry, I ripped i18n/translation related code.

Hope it still helps..

// Menu.js
import React from "react";
import { connect } from "react-redux";
import compose from "recompose/compose";
import { translate, DashboardMenuItem, MenuItemLink } from "admin-on-rest";
import { List, ListItem } from "material-ui/List";
import Divider from "material-ui/Divider";

const styles = {
  main: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-start",
    height: "100%",
    position: "relative"
  },
  leftNavBody: {
    overflowY: "auto",
    overflowX: "hidden",
    paddingBottom: "60px"
  },
  leftNavFooter: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    overflow: "hidden",
    paddingTop: "4px"
  }
};

const Menu = ({ onMenuTap, translate, logout }) => (
  <div style={styles.main}>
    <div style={styles.leftNavBody}>
      <DashboardMenuItem onClick={onMenuTap} />
      <MenuItemLink
        key="res1"
        to="/resource1"
        primaryText="Option 1"
        onClick={onMenuTap}
      />
      <MenuItemLink
        key="res2"
        to="/resource2"
        primaryText="Option 2"
        onClick={onMenuTap}
      />
      <Divider />
      <List>
        <ListItem
          primaryText="Sub-Menu"
          initiallyOpen={false}
          primaryTogglesNestedList
          nestedItems={[
            <MenuItemLink
              key="res3"
              to="/resource3"
              primaryText="Sub Option 1"
              onClick={onMenuTap}
            />,
            <MenuItemLink
              key="res4"
              to="/resource4"
              primaryText="Sub Option 2"
              onClick={onMenuTap}
            />,
            <MenuItemLink
              key="res5"
              to="/resource5"
              primaryText="Sub Option 3"
              onClick={onMenuTap}
            />
          ]}
        />
      </List>
    </div>
    <div style={styles.leftNavFooter}>
      <Divider />
      {logout}
    </div>
  </div>
);

const enhance = compose(
  connect(state => ({
    theme: state.theme,
    locale: state.locale
  })),
  translate
);

export default enhance(Menu);

How can I make my menu look like a nested list

1 Answers1