siteNav: Move the content to the navbar when the siteNav is hidden

[yamgent]

Tell us about your environment

• MarkBind Version: 1.16.1

What did you do? Please include the actual source code causing the issue.

1. Create a website with a navbar and a siteNav.
2. Serve the website on a very small screen (mobile screen size), so that the siteNav gets hidden as part of the responsive design.

What did you expect to happen?

The content of the siteNav should be relocated to the navbar, so that the reader can still access the content of the siteNav.

What actually happened? Please include the actual, raw output.

Readers of the website cannot use the siteNav at all.

This problem is inspired by #518 (review).

[Chng-Zhi-Xuan]

Alternative solutions

• Reduce (max-width: 575.98px) such that it has proper coverage for mobile devices
  • ➕ Quickest fix
  • ➖ Not the best looking
  • ➖ Have a magic number within site-nav.css
• Render a floating action button to expand the site navigation once the screen is smaller than (max-width: 575.98px).
  • ➕ Aesthetically pleasing
  • ➕ Can be used for (max-width: 575.98px) responsive break-point instead of the current design
  • ➖ Longer implementation time
  • ➖ Blocks content underneath it

[damithc]

I prefer the 2nd alternative. If we can't implement it by V2, we can go for alternative 1.

---

• ➖ Blocks content underneath it

Not a big problem if the button is small and slightly transparent.

• Render a floating action button to expand the site navigation once the screen is smaller than (max-width: 575.98px).

In fact, we can make this an option even when the screen is big enough to show siteNav. That is, the reader can collapse the siteNav if they want. When the screen is too small, it will collapse to a button automatically.

[acjh]

The floating action button is bad UX design: https://usabilla.com/blog/floating-action-button-bad-ux-design/

[damithc]

What we are aiming for is something like the following, which is slighly different from what the article is talking about:

Of course collapsing the button to the topNav is also an option but we cannot be sure that the page has a topNav.