documentation icon indicating copy to clipboard operation
documentation copied to clipboard

Missing sidebar TOC on large screens

Open Wryhder opened this issue 1 year ago • 6 comments

It feels a bit awkward to constantly click the hamburger icon to navigate the doc site on a PC. I'd like to suggest adding a sidebar table of contents (TOC) for large screens and only introducing the hamburger menu on smaller screens. Having a prominent TOC on large screens should also help (re-)orient a user regarding their current place in the docs without needing to click the icon.

missing sidebar toc on large screens-fundamentals-asterisk  architecture

Wryhder avatar May 11 '24 20:05 Wryhder

I'd love to create a PR for this if accepted as a valid issue.

Wryhder avatar May 11 '24 21:05 Wryhder

Welcome! The left side navigation bar should automatically show when the browser window is wide enough to display it which seems to be about 1500 pixels. What size screen do you have and what happens if you maximize your browser?

gtjoseph avatar May 13 '24 13:05 gtjoseph

Welcome! The left side navigation bar should automatically show when the browser window is wide enough to display it which seems to be about 1500 pixels. What size screen do you have and what happens if you maximize your browser?

Ah, my bad. I didn't realize there was a sidebar.

My browser is always maxed. I'm not sure if these are the relevant details you're asking for. This is from my browser console:

> window.screen.width 1172 > window.innerWidth 1164

My PC is a 14-inch (1920 x 1080 display), which is relatively small, but it's usually large enough to fit most website's content and TOCs. Could the 1500 be adjusted to accommodate smaller sizes than this number?

Wryhder avatar May 13 '24 15:05 Wryhder

Interesting. If you're browser is maximized on a 1920x1080 display, then window.screen.width should be 1920. The TOC innerWidth cutoff looks to be about 1220 but let me see if I can control that.

gtjoseph avatar May 13 '24 16:05 gtjoseph

Interesting. If you're browser is maximized on a 1920x1080 display, then window.screen.width should be 1920.

This made me curious so I checked and I was using 150% scaling. Changing it to 100% gave me these values in the console:

> window.screen.width 1751 > window.innerWidth 1746

The sidebar also showed up for me on the doc site. However, at this scale icons and text on my screen are too small for comfort, so I'm back to 150.

The TOC innerWidth cutoff looks to be about 1220 but let me see if I can control that.

I'd appreciate it if you make the change, but please free to close the issue (as it seems less valid than I thought when I opened it).

Wryhder avatar May 13 '24 16:05 Wryhder

Gotcha. I'm still looking. Maybe there's also a buried option somewhere to allow the user to always show the sidebar.

gtjoseph avatar May 13 '24 18:05 gtjoseph