Logo over TOC

[MaxThom]

Question

Hi,

I have a mdbook where I modified the index.hbs to add a logo above the TOC:

I have upgraded to the latest version v0.4.42 and readjusted the index.hbs and all the theme contents and since then I can't get my logo working. The TOC is always over it. I have tried a bunch of things such as modifying the css of the scrollbar to relative which work, but then I loose the scrollbar:

Snippet of my added div:

        <nav id="sidebar" class="sidebar" aria-label="Table of contents">
            <div class="logo">
       		   <img alt="{{ book_title }}" width=148px src="{{ path_to_root }}logos/mir_alpha.png">
            </div>
            <!-- populated by js -->
            <mdbook-sidebar-scrollbox class="sidebar-scrollbox"></mdbook-sidebar-scrollbox>
            <noscript>
                <iframe class="sidebar-iframe-outer" src="{{ path_to_root }}toc.html"></iframe>
            </noscript>

            <div id="sidebar-resize-handle" class="sidebar-resize-handle">
                <div class="sidebar-resize-indicator"></div>
            </div>
        </nav>

I tried adjusting the scrollbar css to relative, or top padding which work, but something else break. If I had the div inside the mdbook-sidebar-scrollbox, the logo does below the TOC.

Any idea on how to achieve this? Thank you!

Version

v0.4.42

[ehuss]

@notriddle Can you help here?

[notriddle]

The simplest way to fix this, without changing anything else, would be to modify toc.js.hbs:

https://github.com/rust-lang/mdBook/blob/d1078434af80b16cd75166e45812d95fbeb46643/src/theme/toc.js.hbs#L11

If you insert your <div> before the {{#toc}} placeholder, it will appear at the top of the sidebar, within the scrollbox.

[Kolkman]

Bit different approach, first process the whole lot and then prepend the link.

This code block added to toc.js.hbs

          const newDiv = document.createElement("div");
          const newLink = document.createElement("a");
          newLink.setAttribute('href', "https://example.org");
          const newIMG= document.createElement("img");
          newIMG.setAttribute("src",path_to_root+"Logo.svg")
          const newPath = document.createElement("path");
          newLink.appendChild(newIMG)
          newDiv.appendChild(newLink);
          this.prepend(newDiv);

Add that just after the loop that processes the links and before the line // Track and set sidebar scroll position at line 42 (in commit 68e3572)