Vertical NavBar mode

[justin-b-yee]

Specs

<TopNavBar
    mode = 'vertical',
    // other existing props
/>

Tasks

• Add a 'vertical' mode for the topnavbar component.
• Ensure the vertical mode navbar matches the design provided.
• It's suggested to reuse/restyle the mobile mode code, as the mobile menu is similar to the vertical one.
• 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
• [ ]

Create stories for these cases:

• Vertical mode and 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

[ddfridley]

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

[ddfridley]

idea to use existing nav bar component and pass a mode.

[ckarthik14]

interested in working on this as an OPT volunteer