(Epic) Create a NavBar

[kylemh]

Feature

Why is this feature being added?

• The live navbar is not very flexible and has a lot of ungraceful style breakage depending on the viewport.
• We can't list all public content in the nav because it would look very ugly (across 2 or 3 rows)
• We should be able to list 30+ links within the NavBar without it spanning two bars
  • To accomplish this, we will need a NavItem component that can have a list of other items revealed on hover if needed.
  • See the navbar at https://stripe.com for inspiration

What should your feature do?

• Create a NavItem common/component that takes a list of links.
  • If it's one link, the NavItem should navigate onClick and onEnterDown.
  • If it's multiple links, the NavItem should show/hide the NavItemDropdown on/off hover and on/off click.
  • On mobile, the all links in NavItem should render in a visual grouping (no using NavItemDropdown).
• Create a NavItemDropdown common/component.
• Use the above components to create a responsive, kick-ass NavBar and implement it.
• Create stories for each component comparable to the Button's story in quality and depth.
• Write unit tests for each component.
• Generate snapshots for each component.

Desktop Mock

Mobile Mock

(For screen sizes under 769px in width)
Note: You've got creative freedom for what appears after clicking MENU+, but it should contain every link that the navbar does.
Note 2: Please put the plus to the left of MENU to be consistent with the rest of the nav

[chrismgonzalez]

Is anyone currently working on this? It would be great to have it up and working by Hacktoberfest.

[kylemh]

It’s assigned to @jjhampton

[jjhampton]

sorry, i've been lagging on this. i hope to get some work in tonight. @chrismgonzalez @kylemh

[kylemh]

Note: https://invis.io/NTO3FK69UQS for redesign

[zacharyrgonzales]

I would love to work this! I just got finished the ui for a website with css grid. Can I be assigned to this and or work on this feature?

[kylemh]

Hey @zacharyrgonzales - we appreciate your interest. This issue has a lot of secret context and it’s been assigned to a staff member of Operation Code. There are still plenty of other issues available!

[zacharyrgonzales]

thanks.

…

On Tue, Oct 2, 2018, 12:00 AM Kyle Holmberg ***@***.***> wrote: Hey @zacharyrgonzales <https://github.com/zacharyrgonzales> - we appreciate your interest. This issue has a lot of secret context and it’s been assigned to a staff member of Operation Code. There are still plenty of other issues available! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Al1Gxsm2h_NxjE-ooMAsnysLZJK8bJTGks5ugvLygaJpZM4VQuAZ> .

[kylemh]

Unassigning this as @jjhampton is unavailable.

[zacharyrgonzales]

Can i try this is? ive been using css grid and can nail this! http://github.io/zacharyrgonzales/portfolio

…

On Sat, Oct 13, 2018, 6:42 PM Kyle Holmberg ***@***.***> wrote: Unassigning this as @jjhampton <https://github.com/jjhampton> is unavailable. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Al1Gxi6yV3EKaAhBKr4U8jyoXxFbGZcPks5uknp8gaJpZM4VQuAZ> .

[zacharyrgonzales]

https://zacharyrgonzales.github.io/Portfolio * On Sat, Oct 13, 2018, 7:13 PM Zachary Gonzales <zacharyrgonzales@gmail.com> wrote:

…

Can i try this is? ive been using css grid and can nail this! http://github.io/zacharyrgonzales/portfolio On Sat, Oct 13, 2018, 6:42 PM Kyle Holmberg ***@***.***> wrote: > Unassigning this as @jjhampton <https://github.com/jjhampton> is > unavailable. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#17 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/Al1Gxi6yV3EKaAhBKr4U8jyoXxFbGZcPks5uknp8gaJpZM4VQuAZ> > . >

[kylemh]

I think you can accomplish this without Grid and hope you try using flexbox instead! I feel like it's easy for us to support IE11 and want to move to support it at some point in the future - Grid would make that a bit more difficult.

I am assigning myself to this issue as a placeholder for your work. Thank you, and good luck! 😁

Please note:
If no activity is shared within two weeks, I will remove my assignment. At that point, the issue will be open for anybody to take.

[zacharyrgonzales]

Thank you!

…

On Sat, Oct 13, 2018, 8:01 PM Kyle Holmberg ***@***.***> wrote: I think you can accomplish this without Grid and hope you try using flexbox instead! I feel like it's easy for us to support IE11 and want to move to support it at some point in the future - Grid would make that a bit more difficult. I am assigning myself to this issue as a placeholder for your work. Thank you, and good luck! 😁 *Please note:* If no activity is shared within two weeks, I will remove my assignment. At that point, the issue will be open for anybody to take. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#17 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Al1GxhJsEwYCGDaPvhncPcvwTYJO4bvjks5ukozXgaJpZM4VQuAZ> .

[zacharyrgonzales]

Hey Kyle, This is beyond my scope of understanding. I won't be able to complete the Nav bar. Thanks, Zachary Gonzales Linkedin <https://www.linkedin.com/in/zrg/> Portfolio <https://zacharyrgonzales.github.io/Portfolio/> On Sat, Oct 13, 2018 at 8:46 PM Zachary Gonzales <zacharyrgonzales@gmail.com> wrote:

…

Thank you! On Sat, Oct 13, 2018, 8:01 PM Kyle Holmberg ***@***.***> wrote: > I think you can accomplish this without Grid and hope you try using > flexbox instead! I feel like it's easy for us to support IE11 and want to > move to support it at some point in the future - Grid would make that a bit > more difficult. > > I am assigning myself to this issue as a placeholder for your work. Thank > you, and good luck! 😁 > > *Please note:* > If no activity is shared within two weeks, I will remove my assignment. > At that point, the issue will be open for anybody to take. > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#17 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/Al1GxhJsEwYCGDaPvhncPcvwTYJO4bvjks5ukozXgaJpZM4VQuAZ> > . >

[kylemh]

@zacharyrgonzales no worries.

@RaevLogic you're up!

[jeffnhorner]

Would love to take a stab at this if @RaevLogic passes or decides not to work on it.

[kylemh]

@jhorner32 I do believe @RaevLogic is working on it!