From df75360d3586f709dd7514ace38a22f5f6dba76f Mon Sep 17 00:00:00 2001
From: Pascal Thomet <pthomet@gmail.com>
Date: Tue, 31 Dec 2024 13:40:36 +0100
Subject: [PATCH] tut spa: simplify index

---
 tutorial/single_page_book_app/index.html         |  9 +++++----
 .../resources_singlepage/app.js                  |  2 --
 .../resources_singlepage/page_loader.js          |  4 ++--
 .../{breadcrumbs.js => page_sections.js}         |  8 ++++----
 .../resources_singlepage/style.css               |  6 +++---
 .../resources_singlepage/toggle_sidebars.js      | 16 ----------------
 6 files changed, 14 insertions(+), 31 deletions(-)
 rename tutorial/single_page_book_app/resources_singlepage/{breadcrumbs.js => page_sections.js} (73%)
 delete mode 100644 tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js
diff --git a/tutorial/single_page_book_app/index.html b/tutorial/single_page_book_app/index.html
index 58fac79d..d9a9ab93 100644
--- a/tutorial/single_page_book_app/index.html
+++ b/tutorial/single_page_book_app/index.html
@@ -9,9 +9,10 @@
 </head>
 <body>
 <header class="main-header">
-    <button id="toggle-sidebar">☰</button>
     <div class="header-buttons">
-        <!-- Placeholder for additional buttons -->
+    </div>
+
+    <div class="header-buttons">
         <a href="https://github.com" target="_blank" class="header-btn">GitHub</a>
     </div>
 </header>
@@ -25,8 +26,8 @@ <h1>Immediate GUI Tutorial</h1>
     <main id="content-area-wrapper">
         <div id="content-area"></div>
     </main>
-    <aside id="code-panel">
-        <div id="breadcrumb-container" class="vertical-breadcrumbs"></div>
+    <aside id="sections-sidebar">
+        <div class="sections-sidebar"></div>
     </aside>
 </div>
 <div id="canvas-window" class="draggable-resizable">
diff --git a/tutorial/single_page_book_app/resources_singlepage/app.js b/tutorial/single_page_book_app/resources_singlepage/app.js
index 54cbd44b..20ea181c 100644
--- a/tutorial/single_page_book_app/resources_singlepage/app.js
+++ b/tutorial/single_page_book_app/resources_singlepage/app.js
@@ -1,13 +1,11 @@
 import { initTOC, tocRoot } from "./toc_loader.js";
 import { loadPage } from "./page_loader.js";
 import {registerCanvasDragEvents} from "./canvas_drag"
-import { registerSidebarToggle } from "./toggle_sidebars.js";
 import { initializePyodideHelper, runPythonCode } from "./pyodide_helper.js";
 
 async function initializeAll() {
     await initTOC();
     registerCanvasDragEvents();
-    registerSidebarToggle();
     const rootPage = tocRoot()
     loadPage(rootPage.file + ".md");
 
diff --git a/tutorial/single_page_book_app/resources_singlepage/page_loader.js b/tutorial/single_page_book_app/resources_singlepage/page_loader.js
index cdee1ef8..3e0deb63 100644
--- a/tutorial/single_page_book_app/resources_singlepage/page_loader.js
+++ b/tutorial/single_page_book_app/resources_singlepage/page_loader.js
@@ -1,7 +1,7 @@
 import { marked } from "marked";
 import { baseUrl } from "marked-base-url";
 import { prepareCodeEditors } from "./code_editor.js";
-import { updateBreadcrumbs } from "./breadcrumbs.js";
+import { updatePageSections } from "./page_sections.js";
 
 // Custom renderer to preserve `{literalinclude}` directives
 const renderer = new marked.Renderer();
@@ -23,5 +23,5 @@ export async function loadPage(mdPath) {
     await prepareCodeEditors(mdText, baseUrlPath);
 
     // Update breadcrumbs after the content is loaded
-    updateBreadcrumbs();
+    updatePageSections();
 }
diff --git a/tutorial/single_page_book_app/resources_singlepage/breadcrumbs.js b/tutorial/single_page_book_app/resources_singlepage/page_sections.js
similarity index 73%
rename from tutorial/single_page_book_app/resources_singlepage/breadcrumbs.js
rename to tutorial/single_page_book_app/resources_singlepage/page_sections.js
index c90b5b57..e4dbbb66 100644
--- a/tutorial/single_page_book_app/resources_singlepage/breadcrumbs.js
+++ b/tutorial/single_page_book_app/resources_singlepage/page_sections.js
@@ -1,10 +1,10 @@
-export function updateBreadcrumbs() {
+export function updatePageSections() {
     const contentArea = document.getElementById("content-area");
     const h2Elements = contentArea.querySelectorAll("h2");
-    const breadcrumbContainer = document.querySelector(".vertical-breadcrumbs");
+    const sectionsContainer = document.querySelector(".sections-sidebar");
 
     // Clear previous breadcrumbs
-    breadcrumbContainer.innerHTML = "";
+    sectionsContainer.innerHTML = "";
 
     // Create a list of H2 headings as vertical links
     h2Elements.forEach((h2) => {
@@ -17,6 +17,6 @@ export function updateBreadcrumbs() {
         const link = document.createElement("a");
         link.href = `#${h2.id}`;
         link.textContent = h2.textContent;
-        breadcrumbContainer.appendChild(link);
+        sectionsContainer.appendChild(link);
     });
 }
diff --git a/tutorial/single_page_book_app/resources_singlepage/style.css b/tutorial/single_page_book_app/resources_singlepage/style.css
index a3bc12ea..ed6106f9 100644
--- a/tutorial/single_page_book_app/resources_singlepage/style.css
+++ b/tutorial/single_page_book_app/resources_singlepage/style.css
@@ -214,7 +214,7 @@ body {
 /* ==========================
    Breadcrumbs
 ========================== */
-.vertical-breadcrumbs {
+.sections-sidebar {
     grid-area: canvas;
     display: flex;
     flex-direction: column;
@@ -226,14 +226,14 @@ body {
     height: 100%;
 }
 
-.vertical-breadcrumbs a {
+.sections-sidebar a {
     color: #007bff;
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
     text-decoration: none;
 }
 
-.vertical-breadcrumbs a:hover {
+.sections-sidebar a:hover {
     background-color: #f0f8ff;
 }
 
diff --git a/tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js b/tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js
deleted file mode 100644
index d822beb8..00000000
--- a/tutorial/single_page_book_app/resources_singlepage/toggle_sidebars.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function registerSidebarToggle() {
-    const toggleButton = document.getElementById("toggle-sidebar");
-    const sidebar = document.getElementById("toc-sidebar");
-    const layoutContainer = document.querySelector(".layout-container");
-
-    if (!toggleButton || !sidebar || !layoutContainer) {
-        console.warn("Sidebar toggle elements are missing.");
-        return;
-    }
-
-    // Handle toggle button click
-    toggleButton.addEventListener("click", () => {
-        sidebar.classList.toggle("hidden");
-        layoutContainer.classList.toggle("sidebar-hidden");
-    });
-}
