[LeftNav] Make left nav more composable

[TanTan-TT]

I want to add some complex list in Navleft. Is there any workaround?

[CEC-JeffMcCloud]

I found a workaround for this. Specify an empty array for "menuItems", and specify your custom element for the "header" property. That custom element can contain any number or type of child elements (i.e. "header" is added to the LeftNav as its first child, above the menu items). Example - a set of Tabs...

var header = (
      <div>
        <Tabs>
          <Tab label="Tab 1">
            <div style={{padding: '1em'}}>
              <h2>Sample Tab</h2>
              <p>
                My tab 1.
              </p>
            </div>
          </Tab>
          <Tab label="Tab 2">
            <div style={{padding: '1em'}}>
              <h2>Sample Tab</h2>
              <p>
                My tab 2.
              </p>
            </div>
          </Tab>
          <Tab label="Tab 3">
            <div style={{padding: '1em'}}>
              <h2>Sample Tab</h2>
              <p>
                Put some buttons, custom menu, or any other elements here
              </p>
            </div>
          </Tab>
        </Tabs>
      </div>
    );

// ...... //

<LeftNav ref="leftNav" docked={false} header={header} menuItems={[]}/>

P.S. - you can still specify some menuItems if you want. They'll will just appear beneath your "header" element(s).

Hope that helps.

[iSuslov]

This should be high priority feature. +1

[soda29]

Great example! Thank you!

[TanTan-TT]

Thank you! @CEC-JeffMcCloud , But I think this feature should be in the component. So I would not close this issue.

[CEC-JeffMcCloud]

@TanTan-TT - I agree 100%. I think the LeftNav should be little more than a Paper element that slides in and out. It would simply accept child elements, just as the Paper element does. Material UI should leave it to the developer to put their own Menu component w/ MenuItems, etc inside of it. I don't think it's helpful to assume the LeftNav will only ever be a simple menu control. (IMHO)

[hai-cea]

This is related to #27

[hai-cea]

Dupe of #413