search

gethugothemes / dot-hugo

Dot - Hugo Documentation Theme
https://gethugothemes.com/products/dot/?utm_source=dot_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
260 stars 148 forks source link

Navigation with many subitems is hard to navigate #154

Closed davidsneighbour closed 3 years ago

davidsneighbour commented 3 years ago

https://github.com/themefisher/dot-hugo-documentation-theme/blob/995ed2f6873584921378a26f7ffeaf2a6512baae/layouts/partials/default.html#L5

This navigation makes the user scroll to the bottom of the page so he can see items that are out of the view port. I tested it with some of the demo pages and a small browser window. The navigation stays static on the top left, then when I reach the end of the page the nav finally scrolls up too and makes items further down the list available.

see https://discourse.gohugo.io/t/ot-dot-theme-collapsing-sidebar-feature/29382

The way it is done on the Guide page might be better. https://docs.gethugothemes.com/guide/ On that page I can hover with the mouse and scroll the navigation down/up.

Another way would be collapsible from bootstrap for subitems.

tfsomrat commented 3 years ago

Hi @davidsneighbour

I am trying to add this feature to our theme. can you give me an example so I can do it fast?

davidsneighbour commented 3 years ago

Not yet. I tried working with overflow-y: scroll, but there seems to be a container missing. Do you know if any Javascript is involved in either sidebar (GoDot or gethugothemes)?

tfsomrat commented 3 years ago

ow, you are trying to add a scrollbar? this is a simple task. I can do it. But I am trying to add collapse in the sidebar.

Ok, you want scrollbar in dot theme right?

davidsneighbour commented 3 years ago

For now a scrollbar does the trick. I can add the collapses afterwards, but that will take a while. I want to give that guy in the Hugo discourse a quick solution for now.

tfsomrat commented 3 years ago

Ok, wait, I am working on it...

tfsomrat commented 3 years ago

.sidebar{ overflow-y: scroll; max-height: 300px; } // set the hight as you want

It will do the job.

davidsneighbour commented 3 years ago

not to myself: https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css/