VerticalNavBar component

Specs

<VerticalNavBar 
    menu = [],
    defaultSelectedItem,
/>

// menu prop takes objects with { name: Name1, func: (name) => { // do something} }

Tasks

[ ] Create the VerticalNavBar component
[ ] When the user hovers over an item, highlight the selection, and when they click on it, do the selection.
https://github.com/EnCiv/civil-pursuit/blob/master/app/components/top-nav-bar.jsx
[ ] Menu should take data structured like: { name: name, func: () => { menuFunc(name) }, }
[ ] The menu prop list can take an array as a child to display nested entries, similar to top-nav-bar. ex. menu = [[{ name: name1, func: () => { menuFunc(name1) }, }, { name: name2, func: () => { menuFunc(name2) }, }], { name: name3, func: () => { menuFunc(name3) }, }]
[ ] Re-use the mobile version menu from top-nav-bar to compact/make VerticalNavBar collapsable on smaller screens.

Create stories for these cases:

[ ] 0 menu options
[ ] 3 menu options
[ ] 5 menu options
[ ] Set defaultSelectedItem to a selection other than the first.
[ ] Test that tabbing to a menu item will focus it, and space bar on that item will execute it. -- this is for screen reader for people with disabilities.

Figma

@justin-b-yee I'm going to leave comment here on changes to make above. After its ready to be worked on, we can delete these comments.

When the user clicks an option, highlight the selection.

When the user hovers over an item, highlight the selection, and when they click on it, do the selection.

I think we should include a link to the current nav-bar https://github.com/EnCiv/civil-pursuit/blob/master/app/components/top-nav-bar.jsx

And we should use the same menu structure, including nested, and use (or make reusable) a lot of the mobile version of the menu from top-nav-bar:

Test that the tabs' functions are run on click.

Test that tabbing to a menu item will focus it, and space bar on that item will execute it. -- this if for screen reader for people with disabilities.

EnCiv / civil-pursuit