When the clientWidth of the documentElement is less than 1280px, the aside is not displayed

[GanZhiXiong]

I generally use a vertical screen, but when the monitor is in a vertical screen, the clientWidth is less than 1280px, which means that the page does not display the right side aside, so the table of contents will not be displayed, which is not very friendly for me to read articles.

[kiaking]

Well we need to have break point at some point. I assume if you have display of 1920x1080, then when it put vertically it has width of 1080px. Then, showing outline at right of doc content would require tradeoff between hiding sidebar, so I don't think we can display outline section.

That's been said, I'm trying to come up with a way of showing outline without aside section (right sidebar) in VitePress so when I get something good, I'll try to port it back to Vue website as well 👍

[GanZhiXiong]

@kiaking Is the following solution feasible

I have a good suggestion, when the clientWidth is less than 1280px, expand the table of contents when clicking on the left column chapter. Just like vue 2's documentation

[GanZhiXiong]

@kiaking @antfu Reading documents without a table of contents on your phone is really troublesome to find. Please don't ignore the reading experience on a narrow screen, the table of contents is really important.

Like this document, on mobile it will be very long and it will not show the table of contents https://vuejs.org/guide/essentials/component-basics.html