feat: show toc on mobile screens

[kungfux]

Type of change

• New feature (non-breaking change which adds functionality)

Description

I'd like to use the TOC while reading a post from mobile device. Fixes #1664 and fixes #1963

[kungfux]

@cotes2020 Please suggest if this option works and if it is worth continuing.

[cotes2020]

I appreciate your willingness to help implement new features.

Displaying the table of contents on mobile device screens is a commendable enhancement. However, placing it at the bottom of the sidebar would make it difficult to use and not very aesthetically pleasing.

My idea is to add a button in the top right corner of the top bar, and clicking it would pop up a window to display the table of contents. What do you think?

[kungfux]

I see many websites out there that used to place the TOC in the left sidebar, so I guess that's the first place users will try to use based on my experience. However, typically there is no mix of main menu navigation and TOC. So your option will work, even if it takes a little getting used to. Personally, I have no preference, I just want to make it accessible in any way possible. It's good to know you already have an idea of how to add it. Thanks for the feedback.

[cotes2020]

The TOC and navigation are two different concepts, and stacking them on the left side can cause confusion in design logic. Additionally, the left navigation bar is narrower and not suitable for displaying a lot of text horizontally. Therefore, for the current UI layout, using a separate popup window to display the TOC is a more reasonable solution.

[kungfux]

Well, the TOC on left side may work good enough. However, there are other examples that may inspire like on the screenshot below.

Dropdown TOC example

What do you think of the following concept? I don't see much use of the topbar title at the moment. So, if you have no other plans regarding it like to display post title, it may work better.

Concept

[cotes2020]

Although I think there are better ways, it would require significant changes to the UI, and I currently don't have the energy to redesign it. So for now, let's go with the concept you suggested; at least it can be implemented quickly and added to the project.

[kungfux]

@cotes2020 The solution is ready for first impressions and your feedback.

[cotes2020]

Hi, I didn't take a close look at the code, but I found some points worth discussing when running the interface locally:

1. When the screen width is between 850px and 1199px, the post tobar should remain hidden; otherwise, two similar breadcrumb components (the breadcrumb and categories) appear in the top left corner of <main>. (I think you intended to show the TOC button when the TOC panel on the right side of the desktop is hidden.)

   Screen.Recording.2024-10-01.at.22.53.31.mov

2. The TOC popup can remove the fade-in animation, as this animation is intended to compensate for the delay in loading and running the JS from a desktop view. Therefore, this effect is not necessary on mobile; displaying it every time can cause visual fatigue.

[cotes2020]

I came up with a slightly modified design to solve problem 1 above:

1. In mobile mode, the TOC bar is not displayed by default; instead, there is a TOC button. The TOC bar will only be shown when the button scrolls out of the screen's top.

   mobile_btn.mov

2. In tablet landscape mode (850px <= screen width < 1200px), the same button as in mobile mode will be displayed, but to simplify the design, the TOC bar will not be shown even when this button scrolls out of the top.

   tablet.mov

[kungfux]

In tablet landscape mode (850px <= screen width < 1200px), the same button as in mobile mode will be displayed, but to simplify the design, the TOC bar will not be shown even when this button scrolls out of the top.

Could you please suggest why there is such a difference between mobile and tablet mode? I understand the visual concerns regarding the breadcrumb. However, the TOC is always available on desktop and mobile, but not on tablet.

[cotes2020]

why there is such a difference between mobile and tablet mode?

Reduce your workload. If you think the tablet should maintain the same UX as the phone, I support that too.

[kungfux]

FYI: The design solution is ready for preview.

What do you think if we place breadcrumb on the secondary panel? This way the design will look more consistent and user will be able to navigate to the home page faster without the need to open sidebar when it is not expanded.

[cotes2020]

In terms of UI design, we also need to pay attention to maintaining the responsive variation of the padding on the left and right sides of the secondary top bar. Currently, this aspect is lacking.

responsive-edge.mov

Note: In the video above, I used the browser's Developer Tools to keep the secondary top bar always visible to illustrate the situation.

What do you think if we place breadcrumb on the secondary panel? ...

I don't think it's necessary. First, the horizontal space in the top bar on mobile devices is very narrow, so we should leave as much space as possible for the title. Second, in mobile browsers, you can simply swipe left to return to the previous page.

[cotes2020]

I've made some changes to this PR and will submit a commit to the same branch for your review shortly.

[kungfux]

@cotes2020 Thanks for taking care of the styles and TOC generation. Is there anything else you would like to change?

[cotes2020]

Yes, I am working on fixing the issue with the TOC bar flickering when toggling between show/hide in iOS Safari.

[github-actions]

🎉 This PR is included in version 7.2.0 🎉

The release is available on:

• v7.2.0
• GitHub release

Your semantic-release bot 📦🚀