Secondary Nav Component - DEC-71

[sherakama]

READY FOR REVIEW

Summary

• Secondary Nav Components
• Three options and two colors

Review By (Date)

• As soon as possible

Urgency

• Extremely high

Steps to Test

1. Review tugboat preview for aesthetics (on all breakpoints)
2. Review code for approach and semantics
3. Review keyboard controls for both accordion and buttons

Affected Projects or Products

• D8CORE

Associated Issues and/or People

• DEC-71: Secondary Nav
• @kerri-augenstein

See Also

• PR Checklist

[yvonnetangsu]

Looks good! A few things -

1. I believe we decided at some point to use font-weight: 600 for all level links.
2. If we follow the Figma design, level 1 font size is 20px, level 2 is 18px and level 3 and deeper is 16px. I'm fine with some variations of this (e.g. 19px, 18px, 17px or 19px, 17px, 16px) but I think it's good to have level 1 largest, level 2 smaller and level 3 and deeper same size and even smaller than level 2.
3. I'm not checking for current page highlight since that's probably handled by js also.
4. There's a little tweak to padding-bottom I'd like for the 2nd level link - will post below.

[sherakama]

@yvonnetangsu

Your requested changes are up and yes, this is a real branch. I am currently refactoring all the JS to separate it out from the main nav parts. Please review this branch as is. I have sent in a pull request for the Javascript and you can see it at: #529. These two PRs build on top of each other as will the forthcoming refactor for the primary navigation.

[yvonnetangsu]

@sherakama , the level 3 and 4 font sizes re overridden by level 2 styles so currently they're still 18px -

[yvonnetangsu]

Could we add this bit?

.su-secondary-nav__menu-lv2 .su-secondary-nav__item:last-child .su-secondary-nav__link {
    padding-bottom: 1.4rem;
}

So that there's a bit more padding on the link items that are right above any horizontal dividers?

[yvonnetangsu]

Could we add this bit?

.su-secondary-nav__menu-lv2 .su-secondary-nav__item:last-child .su-secondary-nav__link {
    padding-bottom: 1.4rem;
}

So that there's a bit more padding on the link items that are right above any horizontal dividers?

Before:

After - more bottom padding under "University Communications", "Twig" and "Tools Launchpad"

[sherakama]

@yvonnetangsu & @kerri-augenstein

Please have a review of the updated tugboat builds. I have completely refactored this secondary navigation to be independent of anything. @yvonnetangsu, there are a number of codeclimate issues and comments that I need to address but please have a look and leave your feedback.

[yvonnetangsu]

@kerri-augenstein , in Figma, the mobile menu actually has a max-width and doesn't take on full screen width. I'll post a few questions today just to make sure we're on the same page and using the lingo in the same way 😄

[kerri-augenstein]

@yvonnetangsu ohhhhh, I totally forgot about this!!! Wow. Duh. Okay great. So then, I'm thinking maybe we do both??? Make it 400px max-width and kill third and fourth level expand/collapse?

[sherakama]

@yvonnetangsu @kerri-augenstein

For the sake of this PR let's limit the merge criteria to:

• Center toggles with link text
• Limit width to 400px

Refactoring the behavior of the expand/collapse to end after the 3rd level is a big enough effort that I don't want it to block this work.

[yvonnetangsu]

@yvonnetangsu ohhhhh, I totally forgot about this!!! Wow. Duh. Okay great. So then, I'm thinking maybe we do both??? Make it 400px max-width and kill third and fourth level expand/collapse?

😄 That's a possibility, so I guess my question would be, how does a normally keyboard user navigate a site when they're using a mobile device? I remember Jiatyan did a demo with the Fingate site, where a keyboard user would have to keep tabbing like 100 times to skip through the really long sidebar nav so I just don't want that to happen for those sites with long list of 3rd/4th level links. However, if on mobile, they have a different way to skip through them then it would be fine 🤔

[yvonnetangsu]

@yvonnetangsu @kerri-augenstein

For the sake of this PR let's limit the merge criteria to:

• Center toggles with link text
• Limit width to 400px

Refactoring the behavior of the expand/collapse to end after the 3rd level is a big enough effort that I don't want it to block this work.

Sounds good, @sherakama !

[sherakama]

@yvonnetangsu @kerri-augenstein

Alignment tightened and width applied. Please review once Tugboat has finished doing its thing.

[sherakama]

Question for @sherakama , do I need to review the main nav also or is that decoupled from this PR now?

The main-nav should be left untouched from the previous version. This PR is specifically just for the sidebar navigation.

[yvonnetangsu]

Will review keyboard behavior in detail after lunch (they mostly look very good so really close).

[yvonnetangsu]

Keyboard nav - would be nice when my focus is on a toggle button, if I hit the right arrow, it would open up the submenu for me (similar to the +/- accordion version). So in the below screenshot example, my focus is on the red toggle after "Other Useful Resources", if I hit the right arrow, it should open up the submenu under "Other Useful Resources".

[yvonnetangsu]

Works great! GTG for the scope of this PR! 🎉

[yvonnetangsu]

One minor question - I remember you used to have animation when the focus is on the toggle button (the caret gets bigger). Did you decide to remove that?

[sherakama]

One minor question - I remember you used to have animation when the focus is on the toggle button (the caret gets bigger). Did you decide to remove that?

Yes, I am waiting on feedback from Kerri/Ishi on the appropriate motion.

[sherakama]

THANK YOU SO MUCH FOR ALL THE REVIEW.

^ Caps intentional.

[yvonnetangsu]

THANK YOU SO MUCH FOR ALL THE REVIEW.

^ Caps intentional.

Thank YOU so much for working on this. This is heroic! 😄

[kerri-augenstein]

And back to YOU BOTH! An epic amount of effort and love poured into this!!!!!

[yvonnetangsu]

And back to YOU BOTH! An epic amount of effort and love poured into this!!!!!

Always a pleasure working with you both!!