Detail page table of contents

[eimrek]

Would be great to have a TOC in the material detail pages, that allows to quickly jump to any section. It could be at the side and stay visible when page is scrolled (similar to how wikipedia does it).

[Bud-Macaulay]

I have had a brief look at this;

It seems that wikipedia and some other places handles scrolling TOCS by using a layout of a sidebar container and a maincontent container...
The sidebar contains TOC that scolls with the user. on small pages media queries removes the sidebar altogether and a new TOC hamburger component gets renders atop the page,

I think maybe having defined sidebars that flex to the maincontent container is probably good practice for longterm development in general, as of current placing things to the left or right of the maincontainer is a very good way to break alignment of the logo/heading section or shift all the content unexpectedly to the right... (I think this is one of the things that tailwind is very good at?)

Nonetheless;
I didnt want to refactor the whole detail page without any feedback and as of current i'm not sure it makes sense to even have a TOC with just a few sections atm.

For now there is a hacked version in a branch HERE

• Rather than worrying about restructuing the detail altogether I have rendered the TOC in a 'FloatingContainer' custom component that basically ignores all page information.
• Takes a fixed position on page
• This component loads data dynamically through divIDs,
• Has a collapse button / auto collapses on page size (closes to another fixed position)

If we think it looks like a good thing to have; i'll probably consider refactoring how we div the detail page altogether to not have to worry about positioning so much...

[Bud-Macaulay]

Okay so we discussed quite a bit and decided that the cleanest solution would be do relayout the whole page.

• Now the TOC takes 2/10s of the page (provided there is room) and will pop above if there is not enough room.
  Probably needs some discussion but there is a working branch here.

• I also did some small layout changes on the title section, moving the mc3d id into this TOC and having it scroll with the user.

I would like to get this (or the header/content changes) merged soon, so we can choose an overall view for the page.