Skip to content
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

Table of contents does not appear on mobile #422

Open
utybo opened this issue Nov 21, 2021 · 7 comments
Open

Table of contents does not appear on mobile #422

utybo opened this issue Nov 21, 2021 · 7 comments
Labels
feature New feature or request

Comments

@utybo
Copy link
Contributor

utybo commented Nov 21, 2021

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:

image

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

image

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
Copy link
Owner

CaiJimmy commented Dec 4, 2021

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

@ichenhe
Copy link

ichenhe commented Jan 8, 2022

@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
Copy link

ghost commented Jan 24, 2022

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
Copy link
Contributor

MikDal002 commented May 18, 2022

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

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
Copy link
Contributor

Pull request is Here: #615.

@artemisresende
Copy link

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

@CaiJimmy CaiJimmy added the feature New feature or request label Aug 12, 2023
@balogun14
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants