-
-
Notifications
You must be signed in to change notification settings - Fork 462
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
right nav toc
gives no visual indication its scrollable
#1746
Comments
toc
gives no visual indication is scrollabletoc
gives no visual indication its scrollable
Thanks for the detailed issue @techfg! I agree, we should improve this. I think to start with, the table of contents should have a scroll bar respecting user preferences in cases where it overflows. That’s important for accessibility. A scroll listener keeping it in sync could also be an option, but it would be a follow-up/complement to a proper scrollbar, because even if it keeps things in sync, users may want to use the scrollbar to explore the table of contents. |
Started experimenting a bit with this. This is not as easy as removing the One decision that would also need to be made is the position of this scrollbar. For example, after experimenting with a I guess another valid approach would be to have the scrollbar closer to the actual table of contents. For example, here the Docusaurus approach: Not sure if there are any recommendations on this, I'll have to research a bit more. |
@HiDeoo - Appreciate you looking in to this, funny, I was working on this last night and had some ideas/questions as well for final implementation 😄 Should have a POC to share some thoughts later today! |
I was able to finish the POC, details below. As @HiDeoo mentions, there are some open questions that would need to be answered prior to finalizing. Apologize in the advance for the lengthy post, lots to cover 😄 Disclaimer
POC DetailsThe POC is available at https://stackblitz.com/edit/withastro-starlight-5ct6eh. How to use
|
Thanks a lot for your very thorough experimentations and explanations. Definitely way better than my small experiment just adding a sidebar without modifying any behavior or exploring more options. Super appreciated! I'll try to give my thoughts about the different options and questions you raised, but of course, this is just my opinion and would love to hear more thoughts from others (and also more people experimenting with this).
I'll still continue to think about this and play more with the amazing playground you provided but if anyone else has any thoughts, please share them! |
HI @HiDeoo - Thanks for the taking the time to review the POC and providing your thoughts, appreciated! Great to have a reference for the supported browsers, thank you! You raise a very good point about the left sidebar scrollbar, agreed with you that if we end up with a scrollbar on the right sidebar, it should be identical in styling to the left. I do like how Docusaurus has their sidebar scrollbars styled Regarding adding a new config option, agreed, not needed - let's pick a single path and implement it, can always add config option in future if there's demand for it and that outweighs the increased maintenance cost. Based on your input and the above, I updated the POC to provide some additional options and control. Here's the new control panel:
The above changes provide a way to see how things would look if we treat the styling of the right & left sidebar the same, or different along with the different styles of scrollbars. One thing to note is that the webkit styled scrollbars have a hover color applied, forgot to mention that last night. My preference currently sits:
However, based on the feedback from @HiDeoo & @delucis thus far, I think where things are heading is the following:
The changes required for this are very small, only CSS and about 5 lines of it. Given that, and the guidance you provided on browser compatibility & testing, I'll work up an initial PR and we can iterate as needed. Of course, if anyone else has any input, feel free to share! |
Regarding above, after reviewing the code more, I found several places that have scrollbars beyond left & (soon to be) right nav (e.g., dropdowns) so going to shelve the For now, going with:
Look forward to any additional input, thanks! |
What version of
starlight
are you using?0.21.5
What version of
astro
are you using?4.6.0
What package manager are you using?
pnpm
What operating system are you using?
Linux
What browser are you using?
Chrome, Edge, FIrefox
Describe the Bug
In desktop mode, the
toc
appears on the right side of the screen. When the number of items in the list exceeds the viewport height, a couple of issues arise:Steps to reproduce:
toc
Expected Result:
toc
should give some visual indication that it separately scrollable; ORtoc
should scroll with the windowActual Result:
The
toc
does not move when scrolling, the bottom of thetoc
is not visible and there is no visual clue that it can be scrolled separately.Proposed Solutions:
main-pane
&starlight-toc
always in sync (e.g., https://vercel.com/docs/projects/overview)Link to Minimal Reproducible Example
https://starlight.astro.build/reference/overrides/
Participation
The text was updated successfully, but these errors were encountered: