Table of Contents tree view instead of dropdown

[hellyet]

Hello!
I think that having toc behind a dropdown button is a bad solution. At least, you have to do additional click to see the toc, and it goes if not focused.
It'll be great to see it as a list on the right side of a page, which is empty now, like this (example - otterwiki):

On mobile it travels to sidebar:

Current UI positioning for smaller width is weird as for me

[perber]

Hi @hellyet,

thanks for the feedback and the screenshots!

The mobile ToC placement is indeed something I want to improve as part of the broader mobile design work in #1049.

For desktop, I understand the request for a permanently visible ToC on the right side. There have also been requests to keep the ToC as a button/dropdown, so I don’t want to simply replace the current behavior for everyone.

A possible solution could be to make the ToC display configurable, for example:

• dropdown/button
• sticky side panel on larger screens
• sidebar/drawer on mobile

I’ll keep this issue open to collect feedback and decide on the best implementation.

@Tak-MK, @MenomDE what do you think?

[hellyet]

If somebody satisficed with dropdown button toc, why not to add a config option to change toc type or even disable it?

[perber]

Yes, that’s probably the direction I would consider for this.

A configuration option could make sense, for example to choose between the current dropdown/button behavior and a side panel layout on larger screens or to disable the ToC.

For me, this is somewhat related to #1056 and the broader question of how user configuration options should be stored. This will probably not be the last setting where we need a consistent approach.

[MenomDE]

I understand the points. What I’m also missing is a sticky indicator showing my current position/heading while scrolling.

My favorite implementation is like https://retype.com, especially how well it works on mobile (floating button for ToC, non permanent sticky Sidebar). The way otterwiki handles it with one sidebar Nav & ToC feels cluttered and overwhelming to me.

[hellyet]

I agree with MenomDE

[perber]

I will take a look at retype.com

[MenomDE]

The current leafwiki toc button can probably stay there (without the spaces), that’s where it’s least in the way. Comparing to Retype.

At the end of the day, everyone's got different tastes 😄

Ty

[Tak-MK]

Hi there!
I just found that if there's only two second level headers, the ToC is not generated, is it intentional? 👀
ie.:

# test
## test sub 1
## test sub 2

With an extra sub-sub level or at least three second level headers it works:

# test
## test sub 1
## test sub 2
### test sub sub 1

[perber]

It was intended to work like this:
tocEntries.length > 3

[Tak-MK]

Regarding the mobile phone view, it happens to me same as @hellyet screenshot, where two blank squares are in the top.
Maybe a way of having the ToC on a right sidebar (on PC) would be more useful to move and keep track of the document? 🤔

It was intended to work like this: tocEntries.length > 3

Makes sense I guess, not much of a ToC if there are only two headers 😄 Thanks!