Markbind: 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 https://github.com/MarkBind/markbind/issues/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.