Toc as the sidebar

Features
82

I probably understand what you mean, but I can't imagine how it should be. Can you give me a picture or a similar design in other software.

83

I got the font working. I assumed a font family name was correct, it wasn't and changed to a default serif font.

84

Below is a solarized-dark version of @moonlygreat code.

Hoping that this (or some other expandable + floating TOC variant) will make it into a standard feature of Joplin. It's one of the features I miss from Zim.

Is there a way to prevent the TOC placeholder from being converted into hard links every time the WYSIWYG is used to modify the note? I find this kind of annoying / major usability problem (for my simple use case, where I stay most of the time on WYSIWYG and some very large notes that need TOC)

nav.table-of-contents ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {

	top: 5px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 10px 0px 0px 10px;
	margin: 0px;
	
	overflow: hidden;
	height: 90%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
	content: "[TOC - move your cursor to the right edge]";
	color: black;
}

nav.table-of-contents>ul:hover {
	background: #073642;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

	width: 30%;
	color: none;
	overflow: scroll;
}

nav.table-of-contents>ul:hover::before {
	content: "TABLE OF CONTENTS"
}

nav.table-of-contents>ul:hover li {
	display: list-item;
}

nav.table-of-contents li {
	display: none;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}


	#rendered-md {
	width: 100%;
	}
}
85

I'm also unable getting this CSS to work.
I've added the stylesheets to the file userstyle.css and it seems not working even after restarting Joplin.

I wasn't aware that you need to write down [toc] inside the document to get this to work.

86

I modified the CSS found here and created another dark mode version, I tried to create a tree-list type navigation with a minimal look.

Instructions:
add [toc] in your Joplin document
copy the CSS into userstyle.css found under Options > Appearance
close all instances of Joplin and relaunch & move the mouse cursor to the upper corner in the read panel (just under the first heading)

nav.table-of-contents ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {
 	top: 41px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 3px 0px 0px 3px;
	margin: 0px;
	
	overflow: hidden;
	min-height: 15%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
    content: ' \25C4';
    color: #555555;
    right: 0;
    position: absolute;
    top: 28px;
}

nav.table-of-contents>ul:hover {
	background: #1d2024e3;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

	min-width: 260px;
	color: none;
	overflow: scroll;
}

nav.table-of-contents>ul:hover::before {
	content: "TABLE OF CONTENTS"
}

nav.table-of-contents>ul:hover li {
	display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents li {
	display: none;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

ul li {
    display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents ul {
	margin-left: 1.01em;
}

nav.table-of-contents>ul {
    list-style-type: none;
}

/*
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}
*/

nav.table-of-contents>ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul li:last-child {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul li:last-child {
    list-style-type: '┗ ';
}



/* 
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}


ul ul::before {
	content: ' \00A0';
    letter-spacing: 0.9em;
    position: absolute;
    margin-left: -7px;
    margin-top: 0.2em;
    text-decoration: overline;
}
*/

nav.table-of-contents li a {
    text-decoration: none;
}

nav.table-of-contents li a:hover {
    text-decoration: underline;
}
6 Likes
87

Awesome! Thanks for this :smiley:

88

Yes! Thanks to everyone for this. Seeing what can be done here with Joplin and some CSS, I'm super sad that I'm so bloody horrible at it. Well, anything front end anyways.

But my back end brain has been grinding on this for about 2 months now, trying to figure how I can get this round peg into my square box of a project I wanna attempt. So, I'm hoping that some of the CSS wizards here could weigh in on a few questions:

  1. This TOC is clearly linked to the active note but is it possible to link to a different data source? Specifically, I've structured my 'framework' (very loosely used term in this case) such that each note will have a parent that is accessible via a backlink. Think of it as a web of notes, child notes being the tasks of parent notes broken down into greater detail, eventually being Complete (haven't figured out if that is just a checkbox or disappears).

As such, I've been able to hide both the sidebar and note list giving me a massive amount of workspace. I do have the tabs plug in running a strip along the top that basically gets my 1st tier notebooks and room enough to pin my current focus area. However it would be really nice to be able to just hover over the left side and have a ToC for Notebooks to pop out.

  1. There will need to be another piece, which is have that ToC to drill down to the note level, which I would suspect is already present.

  2. Final question, currently the ToC, whether floating or standard, is just a normal 'in doc' link of exact implemented like Heading Title. Now what if that heading were itself a link, implemented as so:

## [Heading Title](link-to-other-location/note/file/hyperlink)

Is there a way, through CSS, for it to build the ToC links as it does, but if the navigation destination is itself a link, to make it link to that link's destination?

I played with the @cyr06 's awesome $<toc{"level":[2,3],"listType":"ul"}> enough that in order to not make any breaking changes, 'heading' links that point to these links could be marked with 5 #s? Just spitballing and don't want to need configuration panels or heavy dev to make this work if possible (and now that I see just how powerful CSS really is).

Sorry if my terminology is incorrect and if I'm not being clear enough.

Thanks in advance for your time and effort.
:rocket:

90

How to quickly return to the top of the article when viewing the directory
I encountered the same problem, '[toc]' grammar is suitable for completing the article, but it is not very friendly to the writing process.

91

That outline plugin is not easy to use.

92

https://discourse.joplinapp.org/t/add-an-outline-to-your-app-and-suggestions-for-page-introduction-design/26298?u=ammm

93

Is there any way these features get integrated into the original TOC plugin? They are really helpful features, and adding out-of-the-box support would, in my opinion, be nice.

94

Rather late to the show here, but I've had serious problems with the outline plugin, and I've gone back to this, which works beautifully. Many kudos, it has solved my problem as well as if not better than the original, as being more economical of screen real estate.

1 Like
95

The css implementation for creating a floating TOC is way better than the outline Joplin plugin. I made some customizations, but now I have exactly what I need.

image
image1920×1048 272 KB

image
image1920×1048 273 KB

3 Likes
96

It looks great! Could you please share the dark mode userstyle? :heart_eyes: