Table of Contents Side Panel

This will add an in-article navigation panel to the left.

Utility

I found this especially useful for long articles such as those describing my Kaleidoscope conlangs. With the container placed in the global article content, it is automatically added to every article.

Manufacturing

The whole idea is based around the fact that the [articletoc] tag also works from the "Global Article Content" field.

The Content

Where to insert it

1. go to the World Settings
2. go to the "Display" tab
3. go to the "Global Content" child tab
4. go to the "Global Article Content Block" field

What to insert

[container:slide-left][articletoc][section:caption-upright]Table of Contents[/section][/container]

The CSS to make it work

The Side Panel

The main container needs to be moved to the left edge of the screen. In my example, it takes up all the remaining space below the world palette trigger, and animated to slide in and out on hovering.

.user-css .slide-left{
position: fixed;
left:-300px;
top:152px;
bottom:0px;
width:350px;
height:auto;
transition: left 0.5s;
z-index:2;
}

.user-css .slide-left:hover{
left: 0px;
transition: left 0.5s;
}

I've also decided to hide it on prose articles.

.user-css.template-prose .slide-left{
display:none;
}

The Panel Caption

To use the space more efficiently, I decided to rotate the caption by 90 degrees. The placement is a bit tricky depending on the font size, so it's best to experiment with the "left" and "top" parameters. The parameter "overflow:hidden" ensures that no scroll bar is shown here.

.user-css .slide-left .caption-upright{
transform:rotate(-90deg
margin:0px;
position:absolute;
left:245px;
top: 85px;
white-space: nowrap;
overflow: hidden;
margin:0px;
}

The Table of Contents

The inner panel is set to take up the bulk of the space and stretch over the full vertical length. In contrast to the caption, a scrollbar is desirable here, so "overflow" is set to "auto".

.user-css .articletoc{
width: 300px !important;
height:100%;
overflow:auto;
}

Indentation

Finally, the indentation of the content links can be adjusted as follows.

.user-css .article-toc-indent-1{
margin-left:20px;
}

.user-css .article-toc-indent-2{
margin-left:30px;
}

.user-css .article-toc-indent-3{
margin-left:40px;
}

Table of Contents

Access & Availability

Grandmaster

Complexity

containers and sections, CSS

Discovery

inspired by this tutorial: