Fix toc sidebar

doc/src/hexdoc/_templates/book.html.jinja

@@ -7,10 +7,7 @@
     </header>
   {% endif %}
 
-  {# table of contents #}
-  <nav>
-    {% include "components/table_of_contents.html.jinja" %}
-  </nav>
+  {% include "components/table_of_contents.html.jinja" %}
 
   {# actual book content (ie. all the categories) #}
   <main class="book-body">

doc/src/hexdoc/_templates/common/macros.html.jinja

@@ -8,10 +8,10 @@
 {%- endmacro %}
 
 {# link icon in section headers to get a permalink to that section #}
-{% macro permalink(href) -%}
+{% macro permalink(href, class_name="") -%}
   <a
     href="#{{ href }}"
-    class="permalink small"
+    class="permalink small{{ ' '~class_name if class_name }}"
     title="Permalink"
   ><i class="bi bi-link-45deg"></i></a>
 {%- endmacro %}

doc/src/hexdoc/_templates/components/table_of_contents.html.jinja

@@ -1,24 +1,28 @@
 {% import "common/macros.html.jinja" as macros -%}
 
-<h2 id="table-of-contents" class="page-header">
-  Table of Contents<a
-    href="javascript:void(0)"
-    class="permalink toggle-link small"
-    data-target="toc-category"
-    title="Toggle all"
-  ><i class="bi bi-list-nested"></i></a>{{ macros.permalink("table-of-contents") }}
-</h2>
+{# put the link target outside of toc-container so jump to top still works in sidebar mode #}
+<div id="table-of-contents"></div>
+<nav class="toc-container">
+  <h2 class="page-header">
+    Table of <span class="nobr">Contents<a
+      href="javascript:void(0)"
+      class="permalink toggle-link small"
+      data-target="toc-category"
+      title="Toggle all"
+    ><i class="bi bi-list-nested"></i></a>{{ macros.permalink("table-of-contents", "toc-permalink") }}</span>
+  </h2>
 
-{% for category in book.categories.values() if category.entries %}
-  <details class="toc-category">
-    {# category #}
-    <summary>{{ macros.maybe_spoilered_link(category) }}</summary>
+  {% for category in book.categories.values() if category.entries %}
+    <details class="toc-category">
+      {# category #}
+      <summary>{{ macros.maybe_spoilered_link(category) }}</summary>
 
-    {# list of entries in the category #}
-    <ul>
-      {% for entry in category.entries %}
-        <li>{{ macros.maybe_spoilered_link(entry) }}</li>
-      {% endfor %}
-    </ul>
-  </details>
-{% endfor %}
+      {# list of entries in the category #}
+      <ul>
+        {% for entry in category.entries %}
+          <li>{{ macros.maybe_spoilered_link(entry) }}</li>
+        {% endfor %}
+      </ul>
+    </details>
+  {% endfor %}
+</nav>

doc/src/hexdoc/_templates/main.css

@@ -105,6 +105,10 @@ canvas.spell-viz {
   margin: 4px 0;
 }
 
+.nobr {
+  white-space: nowrap;
+}
+
 @media (min-width: 40rem) {
   .book-body {
     width: 70%;
@@ -113,7 +117,7 @@ canvas.spell-viz {
     float: left;
   }
 
-  #table-of-contents {
+  .toc-container {
     position: sticky;
     top: 0;
     width: 25%;
@@ -121,6 +125,11 @@ canvas.spell-viz {
     max-height: 80%;
     overflow-y: scroll;
   }
+
+  .toc-permalink {
+    display: none;
+    visibility: hidden;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

nodemon.json

@@ -0,0 +1,5 @@
+{
+    "watch": ["doc/src/hexdoc/_templates"],
+    "ext": "jinja,html,css,js",
+    "exec": "hexdoc doc/properties.toml -o _site/src/docs --lang en_us --allow-missing && hexdoc_merge --src _site/src/docs --dst _site/dst/docs"
+}