[New Menus] Nested Support

[chrismcv]

Hi,
Just wondering what the status of nested support is with new menus - the ListItem being used seems to support some variation of this, but it doesn't look menu friendly - it just indents.

What is needs done to support this? Happy to help.

Chris

[jbbae]

+1

[cristiano-belloni]

+1

[afhammad]

+1

[chrismcv]

@subjectix happy to close this

[alitaheri]

@chrismcv can menus be nested now? I haven't had the time to tackle them.

[chrismcv]

yeah - slipped that one in a while back. #2148

https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/menus.jsx#L334

[alitaheri]

Oh, right. Nice work 👍 👍

[STRML]

@chrismcv What's a good way to mark a nested menu item as selected? Going for a LeftNav similar to the one on https://www.google.com/design/spec/components/subheaders.html#subheaders-menu-subheaders

Happy to make a new issue if you think it's necessary.

[oliviertassinari]

@STRML Having a look at your example, I think that a <List /> would be more appropriate that a <Menu />.

[STRML]

Thanks. It's a bit tricky to get working with nested <SelectableList>s. For posterity, here's what worked for me (based on PageWithNav from the docs):

menu(items, styles, nestedLevel=0) {
  return (
    <SelectableList
      autoWidth={false}
      desktop={true}
      valueLink={{value: this.state.activeRoute, requestChange: this.handleUpdateRoute}}
      openDirection="bottom-right"
      style={nestedLevel === 0 ? styles.secondaryNav : {}}
      value={this.state.activeRoute}
      width={styles.secondaryNav.width}
      selectedItemStyle={{
        color: this.context.muiTheme.rawTheme.palette.accent1Color,
      }}
      zDepth={0}>
      {_.flatten(items.map((item, index) => 
        this.menuItem(item, index, styles, nestedLevel)))}
    </SelectableList>
  );
},

menuItem(item, index, styles, nestedLevel) {
  if (item.divider) return <Divider key={index} />;
  let out = [
    <ListItem
      key={index}
      primaryText={item.text}
      data-route={item.route}
      value={item.route}
      onTouchTap={this.onItemTouchTap}
      initiallyOpen={true}
      desktop={true}
      autoGenerateNestedIndicator={false}
      nestedLevel={nestedLevel}
    />
  ];
  if (item.nested) {
    out.push(this.menu(item.nested, styles, nestedLevel + 1));
  }
  return out;
},

render() {
  let styles = this.getStyles();
  const menuItems = [
    {route: '/a', text: 'Item A', nested: [
      {route: '/a_a', text: 'Nested Item A'}
      {route: '/a_b', text: 'Nested Item B'}
    ]},
    {route: '/B', text: 'Item B'},
    {divider: true},
    {route: '/C', text: 'Item C'},
  ];
  return this.menu(menuItems, styles);
}

[oliviertassinari]

I'm happy you found a solution, and thanks for sharing that may help other 👍.

Is the flatten really needed? I though react was doing it for us.

[STRML]

Thanks - you're correct, the _.flatten() isn't necessary.