Table of contents does not appear on mobile

[utybo]

Describe the bug

There is no way to see the table of contents on mobile.

Expected behavior

There is either a button or a section where I can see and navigate the table of contents, or something else that would make navigating large articles easier.

To Reproduce

Use toc: true on any article and open the article on a mobile device or in a browser with a narrow window.

Screenshots

Table of contents appears as expected on large displays:

But on narrow ones, it does not appear at all:

Environment

• Hugo version [e.g: 0.80.0]: 0.89.3+extended
• Hugo extended?: Yes

Additional context

Add any other context about the problem here.

If it's a UI issue, fill the following information:

• OS: [e.g. iOS] Windows 11 (21H2 22000.346)
• Browser [e.g. chrome, safari] Edge Chromium Stable
• Version [e.g. 22] 96.0.1054.29

Content of config.yaml

I'd prefer not sharing mine, as I don't think it is related to the issue.

Link to the demo site and/or source repository

None, this is something I encountered while migrating my blog to use the ToC feature instead of manual lists of links to sections.

[CaiJimmy]

Now it's designed to behave like this because I didn't occur a nice way to put TOC on a mobile screen 😥.

[ichenhe]

@CaiJimmy

How about add a float menu buttom at the corner? Click it to show the TOC (pop window or a slide-in animation).

[ghost]

Now it's designed to behave like this because I didn't occur a nice way to put TOC on a mobile screen 😥.

https://xaoxuu.com可以试试这个

[MikDal002]

Last time, I've been thinking about including TOC at the top of the article. Something like this:

This is my early work, I am not so talented designer :D. But it might be a starting point. It's tablet size view because I do not like the narrow column where the article is positioned, so I am trying to figure out how to restore some space. I've implemented basic behaviour, and it seems to work very well. If this idea seems to be OK, then I can create a PR.

[MikDal002]

Pull request is Here: https://github.com/CaiJimmy/hugo-theme-stack/pull/615.

[artemisresende]

@CaiJimmy, since the PR mentioned above will not be added to the code-base, is there any plans to add a ToC to mobile?

[balogun14]

why don't we try using a side bar for that to make it responsive