Improve documentation navigation and code blocks

site/decodal-site/src/layouts/ManualLayout.astro

@@ -35,8 +35,10 @@ function renderNav(items, prefix = []) {
     <div class={playground || frontpage ? 'layout playground-layout' : 'layout'}>
       {!playground && !frontpage && (
         <aside class="sidebar">
-          <a class="sidebar-title" href="/docs/">Manual</a>
-          <nav set:html={renderNav(nav)} />
+          <div class="sidebar-content">
+            <a class="sidebar-title" href="/docs/">Manual</a>
+            <nav set:html={renderNav(nav)} />
+          </div>
         </aside>
       )}
       <main class={playground ? 'playground' : frontpage ? 'frontpage' : ''}>
@@ -47,5 +49,20 @@ function renderNav(items, prefix = []) {
       <span>2026 Hare</span>
       <a href="https://gitea.hareworks.net/Hare/Decodal">Source</a>
     </footer>
+    <script>
+      const sidebar = document.querySelector('.sidebar-content');
+
+      if (sidebar instanceof HTMLElement) {
+        const updateStickyOffset = () => {
+          const stickyTop = Math.min(0, window.innerHeight - sidebar.offsetHeight);
+          sidebar.style.setProperty('--sidebar-sticky-top', `${stickyTop}px`);
+        };
+
+        const observer = new ResizeObserver(updateStickyOffset);
+        observer.observe(sidebar);
+        window.addEventListener('resize', updateStickyOffset);
+        updateStickyOffset();
+      }
+    </script>
   </body>
 </html>