Redesign the navbar

[le0tan]

Is your request related to a problem?

The current responsive design makes the pagenav disappear when the width is small, which is quite inconvenient if the user is reading a long article with many sections on a mobile device.

With different widths, MarkBind shows the article page with four layouts:

Both nav directly accessible:

Left nav directly accessible, right nav inaccessible:

Both nav inaccessible:

Left nav indirectly accessible, right nav inaccessible:

Describe the solution you'd like

We can learn from how Docusaurus design their responsive navigation:

View 1 (all navigation directly accessible):

View 2:

Describe alternatives you've considered

na

Additional context

na

[acjh]

Left nav indirectly accessible, right nav inaccessible

Isn't that top nav indirectly accessible?

We can learn from how Docusaurus design their responsive navigation

Agreed 👍

[nbriannl]

Looking at this, it seems that in this issue, it would be nice to have the left SiteNav also visible at smaller pages width too, right? It's a minor gripe of mine that I cannot navigate the site (via the SiteNav) when i have the my browser half of my screen.

Edit: Should anyone choose to also work on SiteNav please refer the discussion by #591 as well

[ang-zeyu]

related #616

[ang-zeyu]

Reopening this for the top nav.

Should we switch that though? @damithc @jonahtanjz

The case against it would be a bulky navbar which takes up a huge portion of the screen on smaller devices (e.g. iphone SE), leaving lesser space for content

[jonahtanjz]

Yup agree that for smaller devices the navbars will cover a big portion of the content.

How about a lower navbar that hides/shows when a user scrolls down/up respectively? This way, we can keep the current design of the navbar and also not block the content when the user is reading (scrolling down), as well as allow the lower navbar to be easily accessed by scrolling up.

[ang-zeyu]

Sounds good!

How about a lower navbar that hides/shows when a user scrolls down/up respectively?

The entire <header fixed>, right?

Might this cause issues with the resize observer introduced earlier as well?

[jonahtanjz]

The entire <header fixed>, right?

Yup should be able to apply this to the whole <header fixed> instead of just the lower navbar.

Might this cause issues with the resize observer introduced earlier as well?

Should be fine as the observer will look for change in the header size. What we can do is set the header height to 0 to hide so that the change can be picked up by the observer.

[ang-zeyu]

Left with the "top nav (two rows)" portion to go

[jonahtanjz]

Went to check out some of the static site generators and documentation pages to see what others are doing and it seems they mostly either have 2 rows, floating button or combining the site nav with their menu.

AWS/Google Cloud docs sites (2 rows, similar to our current design):

---

Gatsby (floating button):

Docusaurus (Combine site nav and top nav menu):

---

Opening the menu will display the site nav first with a "back to main menu" button to change to the top nav menu

I also noticed that most of these sites will have the page nav as a dropdown at the top of the page, similar to the one seen in the first Docusaurus screenshot.

@ang-zeyu do you have other design/example sites in mind or any suggestions on where the site and page nav should be shifted to?

[ang-zeyu]

@jonahtanjz thanks for collating these. I think those look about right.

Is the intention to support multiple layouts apart from the one in the OP above?

(assuming yes)
I think supporting the "sidebar" popup as well would be good. Bootstrap vue has a ready made one we could probably integrate easily.

The FAB option is also something we can explore.

As for the other parts (left (brand) right default slots), I think its more or less similar to the ones you've posted. I've annotated the image in OP above with my take:

the biggest irk right now I think is our default slot being hidden behind the accordian open button on the top right. 🤔 Would be nice to everything layed out and easily accessible per the design above.

Another issue is slot="right" being hidden inside the accordian as well, which isn't exactly "right"

[jonahtanjz]

@ang-zeyu Thought you wanted a redesign of the current navbar by shifting the lower navbar buttons (site and page nav) to somewhere else to reduce the size of the navbar on mobile 😂😂 I guess we can consider exploring that as possible alternative layouts.

If I understood "top nav (two rows)" right, it means creating another row for the top nav menu items and remove the current accordion entirely?

[ang-zeyu]

Thought you wanted a redesign of the current navbar by shifting the lower navbar buttons (site and page nav) to somewhere else to reduce the size of the navbar on mobile

Ohh 😂 The issue title change might have been misleading, my bad. Changed it because this issue entails redesigning the entire navbar.

I think this dealt with what you've proposed and implemented here sufficiently #980 (comment).

If I understood "top nav (two rows)" right, it means creating another row for the top nav menu items and remove the current accordion entirely?

yup. for easier accessbility + make slot="right" actually place things on the right.