search

MarkBind / markbind

MarkBind is a tool for generating content-heavy websites from source files in Markdown format
https://markbind.org/
MIT License
135 stars 124 forks source link

Redesign the navbar #980

Closed le0tan closed 2 years ago

le0tan commented 4 years ago

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:

image

Left nav directly accessible, right nav inaccessible:

image

Both nav inaccessible:

image

Left nav indirectly accessible, right nav inaccessible:

image

Describe the solution you'd like

We can learn from how Docusaurus design their responsive navigation:

View 1 (all navigation directly accessible):

image

View 2:

image

Describe alternatives you've considered

na

Additional context

na

acjh commented 4 years ago

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 commented 4 years ago

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.

image

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 commented 4 years ago

related #616

ang-zeyu commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

jonahtanjz commented 3 years ago

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):

image

image



Gatsby (floating button):

image



Docusaurus (Combine site nav and top nav menu):

image

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

image

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 commented 3 years ago

@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: docu

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 commented 3 years ago

@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 commented 3 years ago

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 https://github.com/MarkBind/markbind/issues/980#issuecomment-775935220.

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.