Dark Mode

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
This repository was archived by the owner on Feb 5, 2025. It is now read-only.

[WIP] Drive vertical nav by array of nav items#13

Open
benjaminapetersen wants to merge 1 commit intopatternfly:masterfrom
benjaminapetersen:vertical-nav/array
Open

[WIP] Drive vertical nav by array of nav items#13
benjaminapetersen wants to merge 1 commit intopatternfly:masterfrom
benjaminapetersen:vertical-nav/array

Conversation

Copy link
Member

benjaminapetersen commented Jan 26, 2018

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

@priley86 thoughts?

Copy link
Member Author

benjaminapetersen commented Feb 1, 2018

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.

Copy link
Contributor

mturley commented Feb 1, 2018

@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).

Copy link
Contributor

mturley commented Feb 1, 2018

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 => )

Copy link
Contributor

mturley commented Feb 1, 2018 *
edited
Loading

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

Copy link
Contributor

mturley commented Feb 2, 2018

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

Copy link
Member Author

benjaminapetersen commented Feb 5, 2018

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

Copy link
Contributor

mturley commented Feb 5, 2018

@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

Copy link
Contributor

mturley commented Feb 5, 2018

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

Copy link
Member

priley86 commented Feb 5, 2018

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

Copy link
Member Author

benjaminapetersen commented Feb 6, 2018

@mturley works for me!

Copy link
Member

priley86 commented Feb 9, 2018

@benjaminapetersen please keep going...

Copy link
Member Author

benjaminapetersen commented Feb 9, 2018

@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!

Copy link
Contributor

mturley commented Feb 26, 2018

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants