render the TOC correctly for mobile and desktop

1 files changed, 50 insertions, 15 deletions

diff --git a/templates/note.html b/templates/note.html
index 1d85b62..ccd21a6 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -1,15 +1,46 @@
 {% extends "base.html" %}
-
 {% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
-
 {% block content -%}
-<main>
-  <h1>{{ page.title }}</h1>
+
+<div class="note-container">
+  <main role="main" class="note-content">
+    <h1>{{ page.title }}</h1>
+    
+    {% if page.toc %}
+    <div class="toc-container mobile-toc">
+      <div class="toc-header" id="mobile-toc-toggle">
+        <span class="toc-arrow">&#9656;</span> Table of Contents
+      </div>
+      <div id="mobile-toc" class="toc">
+        <ul>
+        {% for h1 in page.toc %}
+          <li>
+            <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+            {% if h1.children %}
+              <ul>
+              {% for h2 in h1.children %}
+                <li>
+                  <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+                </li>
+              {% endfor %}
+              </ul>
+            {% endif %}
+          </li>
+        {% endfor %}
+        </ul>
+      </div>
+    </div>
+    {% endif %}
+
+    {{ page.content | safe }}
+
+    <p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
+  </main>
 
   {% if page.toc %}
- <div class="toc-container">
-    <button id="toggle-toc" class="toc-toggle">Table of Contents</button>
-    <div id="toc" class="toc">
+  <aside class="toc-container desktop-toc">
+    <div class="toc-header">Table of Contents</div>
+    <div class="toc">
       <ul>
       {% for h1 in page.toc %}
         <li>
@@ -27,17 +58,21 @@
       {% endfor %}
       </ul>
     </div>
-  </div>
+  </aside>
   {% endif %}
-    
-  {{ page.content | safe -}}
-</main>
+</div>
 
 <script>
-  document.getElementById('toggle-toc').addEventListener('click', function() {
-    var toc = document.getElementById('toc');
-    toc.style.display = toc.style.display === 'none' ? 'block' : 'none';
-    this.textContent = toc.style.display === 'none' ? 'Show Table of Contents' : 'Hide Table of Contents';
+  document.getElementById('mobile-toc-toggle').addEventListener('click', function() {
+    var toc = document.getElementById('mobile-toc');
+    var arrow = this.querySelector('.toc-arrow');
+    if (toc.style.display === 'none' || toc.style.display === '') {
+      toc.style.display = 'block';
+      arrow.innerHTML = '&#9662;'; // Down-pointing triangle
+    } else {
+      toc.style.display = 'none';
+      arrow.innerHTML = '&#9656;'; // Right-pointing triangle
+    }
   });
 </script>