Add reduced top navigation bar

[petesfrench]

Done

• Moves the reduced and secondary navigation, found on u.com, over to Vanilla
• Some refactoring to align better with Vanilla defaults and remove unneeded code
• extracting sticky funtionality to it's own is-sticky class name

Fixes https://warthogs.atlassian.net/browse/WD-11789

QA

Note: This is part of the work to upstream meganav functionality and may not be fully functional on its own.

Currently we focus mostly on the styling of the reduced navigation on desktop screens, making sure it doesn't break on mobile, that search is opened, that the secondary navigation below it works.

The contents of the dropdowns opened by reduced navigation are not part of this, the dropdowns funcionality on mobile is also not part of this (the "sliding" navigation).

• Open demo
• Verify that the reduced navigation (top bar), renders as expected
  • Note: "Products", "Use cases", etc - the dropdowns in reduced navigation only contain placeholder dropdowns. Only search works as it's built-in.
  • Check mobile view as well, making sure that navigations work properly and open the dropdowns, including search
  • check if secondary navigation (below reduced one) is sticky
• Review updated documentation:
  • https://vanilla-framework-5107.demos.haus/docs/patterns/navigation#reduced
  • https://vanilla-framework-5107.demos.haus/docs/patterns/navigation#sticky

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[bartaz]

@petesfrench @jmuzina @pastelcyborg While this is not fully ready for review (docs are missing), code should be more or less in required shape.

Please have a look if you get a chance and leave any comments, suggestions, questions that may arise. Pete has the most context, but all comments are welcome. This is just a part of a meganav, so techcally is not meant to be fully working (for example empty dropdowns), but let's make it as good as possible for Vanilla standard.

[jmuzina]

This needs a package.json minor version bump, as well as an entry in releases.yaml for release notes

[pastelcyborg]

Thanks for doing this, @petesfrench!

High-level comment/question: I notice the reduced nav on mobile is positioned statically - it pushes page content down when opened. Just wanted to confirm this is desired functionality? Sometimes this shift can be quite jarring.

[jmuzina]

Is there meant to be so much whitespace between the topnav and the secondary nav on mobile when the topnav is expanded?

Screencast.from.07-01-2024.10.13.58.AM.webm

Edit: No, this scrolling is not intentional, seems like a bug with sidenav:

MM thread

[bartaz]

Is there meant to be so much whitespace between the topnav and the secondary nav on mobile when the topnav is expanded?

No, good catch. Looks like we have this issue with standard sliding nav as well. Body elements need to be set to overflow hidden (disabled scroll) when sliding nav is open. I need to figure out how to best do it (JS, CSS?).

[jmuzina]

Great work, that was quite an effort :)

Good to go pending design review

[lyubomir-popov]

Looks good, a few small things:

• this feels a bit unresolved - didn't we agree on a different alignment?
  
• can chevrons match the text colour:
  
• can we use real items here -
  
• small misalignment between breakpoints:
  
• Can we just say close? ideally, things shouldn't be shifting around between breakpoints, and "Menu" and "Close" are almost the same width

[bartaz]

Looks good, a few small things:

• this feels a bit unresolved - didn't we agree on a different alignment?

Sliding mobile navigation has not been part of this PR. Animating this (as discussed) will probably increase the scope, but I can try.

• can chevrons match the text colour:

Icons in light/dark theme match default text colour. We don't have muted icons. This would be out of scope for this PR, we would need to solve it on theme level (and have 2x more icons defined - muted versions of everything).

• can we use real items here -

Out of scope for this PR. This is about the navigation itself, not the dropdowns in meganav.

• small misalignment between breakpoints:

This is caused by default Vanilla navigation breakpoint not being large enough for this. If we change it, it will change for everyone by default, as it's a settings level.
Unfortunately we can't change it per example. Not sure how to best address that.

• Can we just say close? ideally, things shouldn't be shifting around between breakpoints, and "Menu" and "Close" are almost the same width

This is not a menu - you have search open. Search icon changes to X icon for that one.

[bartaz]

As discussed in stand-up, we are merging this as-is for now, but the visual issues will be addressed in following updates.