[WIP] Drive vertical nav by array of nav items

[benjaminapetersen]

Work in progress ~~

This works for the most part, except for the nested ul for the child items of Overview, Projects and Stages. I prob need to pass the children into the <RouteNavItem>

@priley86 thoughts?

[benjaminapetersen]

So I see this PR coming with a patternfly-react vertical nav:
patternfly/patternfly-react#88

Looks like this thing has tons of features: https://mturley.github.io/patternfly-react/?selectedKind=Vertical%20Navigation&selectedStory=Items%20as%20JSX&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Guessing it might be better to swap to that nav (when its ready) rather than mess with my little PR here, though I'm still interested in a data-driven menu rather than hard-coded html.

[mturley]

@benjaminapetersen, thanks for referencing my PR. Sorry for the delay on getting it merged-- you're right, it's very featureful, I bit off a little too much :) There is one more minor issue I'm fixing and I'll let you know when it's merged.

My next goal after merging it was to add it to this demo app, but I'm caught up in ManageIQ work now, so you are welcome to help if you want! My component does support items as an array of objects. All the props available to VerticalNavItem are available as properties on those objects. You can use either that or JSX children, or even a combination (you can pass child items as an array to a JSX item).

[mturley]

Just to note though, you also don't need to hard-code every item to take advantage of JSX syntax. You can simply items.map(item => <VerticalNavItem {...item} otherProps="..." subItems={item.subItems.map(...)} />)

[mturley]

If you click "Show Info" on my storybook examples I go into detail.

[mturley]

@benjaminapetersen, patternfly/patternfly-react#88 has been merged to master. Feel free to use it :)

[benjaminapetersen]

@mturley nice, thx! Will take a look. Still new to react, but hoping to get up to speed fairly soon.

[mturley]

@benjaminapetersen, Great! Feel free to check out our work-in-progress Notes for React Beginners doc. Feedback welcome, this content will eventually end up in one of our new developer library repos. https://docs.google.com/document/d/1O773jB-t8NgirkIA5pnPWjmZRRy9iZ02HS35I7EEYOw/edit

[mturley]

If I beat you to this, I might integrate my VerticalNav and then close this PR.

[priley86]

@benjaminapetersen @mturley yea, this would be a nice addition when we get time... 👍. It's not super pressing for mIQ right now though.

[benjaminapetersen]

@mturley works for me!

[priley86]

@benjaminapetersen please keep going... 👍 😄

[benjaminapetersen]

@mturley skimmed your link above briefly. Didn't see example of programmatically driving the menu, any chance you have something somewhere? I'll swing back around in a bit otherwise & do some more fishing, just wanted to check with you, thx!

[mturley]

@benjaminapetersen, if you go to https://rawgit.com/patternfly/patternfly-react/gh-pages/index.html and select Vertical Navigation -> Items as Objects on the left, then click Show Info in the upper right, you will see my explanation of how to pass items as objects. All of the props available to be passed to the VerticalNavigation.Item component can be instead passed as properties in that array of item objects. Including callbacks like onClick, if you like. The only difference is that instead of passing secondary/tertiary items as JSX children, you can pass them as a subItems property in your item object, which it itself an array of the sub-item objects.

Note that the descriptions of each propType are not properly showing up in Storybook. For a full list of these properties you can have in your items, see the comments in the source for itemObjectTypes in this file: https://github.com/patternfly/patternfly-react/blob/master/src/components/VerticalNav/VerticalNavConstants.js#L13

Let me know if you have any other questions.