Design - navigation solution

[CheetoMao]

Harmonium 'plug-and-play' navigation solution

I'm submitting a ...

• [ ] feature request

What is the current behavior? Currently we have a topbar that supports multiple content types and allows for multiple design options. BUT it does not have a small-screen or mobile solution (ie: flyout or dropdown). We have a drawer component, but it's mainly setup for use on the docs-site and is not well suited for easy edits to use in other projects.

What is the expected behavior? Instead, we would like to have a navigation solution so that when starting a new project, we can use a <nav> component and know that it will be responsive and has styles for all of the nav options we encounter.

For feature requests: why should the behavior change? This isn't so much a change to our components as it is a combination of topbar and drawer components to create a more robust navigation component.

Having this type of navigation component will save us time on implementation (navs are usually one of the more time consuming pieces to setup)

More info from design meeting: make a topbar nav for desktop with a breakpoint variable that can be change to whatever. on small screens, nav breaks into a drawer (that uses the same breakpoint var). And then dropdowns should be styled by default and then automatically stack on small screens.

[CheetoMao]

@blazebarsamian I'm moving this ticket in to the 'this sprint' col, but focus on getting the topbar bugs and frustrating bits fixed first, before making this mega-component.

[blazebarsamian]

@CheetoMao wait which bugs and frustrating bits should be fixed first? like #109?

[blazebarsamian]

I think dropdown styles need to also be added. I'm going to work on that first. Going to look for topbar bugs and frustrating bits too and fix those before starting on the mega component

[blazebarsamian]

After meeting with laura yesterday to go over this, this is what we have decided to do.

We've decided to combine some of the styles and give only two options for the drawer (left or right). Im also going to add in props for the drawer that tell it at what breakpoint to collapse.

Basically this is how the drawer should always work:

• It should always be 100vh (but make this a variable so it can be changed)
• It should always scroll
• It should always overlap content when it is expanded
• dropdowns should stack and nested menus should be indented when the drawer is expanded.

Updates to Props + Styles:

• [x] add nav breakpoints to settings file
• [ ] combine collapsible and overlay drawer mixin styles and have those be the default styles
• [ ] remove collapsible and overlay props
• [x] make all drawers scroll (so we dont need that mixin)
• [ ] remove scrollable prop
• [x] Add collapseFor[SIZE] props to the drawer component
• [ ] write loops for drawer breakpoint classes and include drawer mixin
• [ ] fixed drawer styles and prop - i think this needs to also be combined with the overlay/collapsible syles (we just need 1 drawer that has a height that you can set, is scrollable, can collapse at a set breakpoint)
• keep left and right drawer props and styles

Other ToDo Items:

• [ ] make sure dropdown styles work properly
  • [ ] rev-Menu--verticalLeft and rev-Menu--verticalRight styles for when the drawer is expanded (need to be display: block and no hover effects, nested padding on mobile)
• [ ] add rev-Menu-item--hasSubmenu so that dropdown arrow can be added
• [ ] Update props and vars tables for the drawer component

[blazebarsamian]

Update:

• Finally got the drawer controls styles down.
• added styles using the breakpoint loop depending on which prop you use to collapse the drawer.
  • I need to adjust the breakpoints to use medium-down, large-down ect though. currently its working for medium up ect and thats not how that should work ha

I really think im getting closer! I have to work on fixing rev-Drawer--right for desktop. Its currently not going to the right of the content on desktop (at the breakpoints, it is though). After I fix that Im going to check through everything and make sure I didnt miss any styles that are needed and hopefully a bunch of stuff doesnt come up when I'm testing :)

[revelry-stalebot[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.