chore: update layouts

_layouts/post.html

@@ -9,9 +9,9 @@ tail_includes:
   - comments
 ---
 
-{% include lang.html %}
+{% include lang.html %} {% include toc-status.html %}
 
-<article class="px-1">
+<article class="px-1" data-toc="{{ enable_toc }}">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
     {% if page.description %}
@@ -75,6 +75,45 @@ tail_includes:
     </div>
   </header>
 
+  {% if enable_toc %}
+  <div
+    id="toc-bar"
+    class="d-flex align-items-center justify-content-between invisible"
+  >
+    <span class="label text-truncate">{{ page.title }}</span>
+    <button type="button" class="toc-trigger btn me-1">
+      <i class="fa-solid fa-list-ul fa-fw"></i>
+    </button>
+  </div>
+
+  <button
+    id="toc-solo-trigger"
+    type="button"
+    class="toc-trigger btn btn-outline-secondary btn-sm"
+  >
+    <span class="label ps-2 pe-1"
+      >{{- site.data.locales[lang].panel.toc -}}</span
+    >
+    <i class="fa-solid fa-angle-right fa-fw"></i>
+  </button>
+
+  <dialog id="toc-popup" class="p-0">
+    <div
+      class="header d-flex flex-row align-items-center justify-content-between"
+    >
+      <div class="label text-truncate py-2 ms-4">{{- page.title -}}</div>
+      <button
+        id="toc-popup-close"
+        type="button"
+        class="btn mx-1 my-1 opacity-75"
+      >
+        <i class="fas fa-close"></i>
+      </button>
+    </div>
+    <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
+  </dialog>
+  {% endif %}
+
   <div class="content">{{ content }}</div>
 
   <div class="post-tail-wrapper text-muted">