From e3a3cc5b6d4090d71be277d8399a91c3a8d187b1 Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Mon, 16 Feb 2026 14:39:30 +0100
Subject: [PATCH] Add sidebar toggle button to breadcrumb with open/close
 functionality

Move sidebar toggle from sidebar panel to breadcrumb navigation, positioned
left of the HOME icon. Uses distinct icons for open (sidebar-inset) and
closed (sidebar) states. Sidebar state persists via sessionStorage. Remove
old non-functional toggle buttons from layout and HTMLBlock plugin.
---
 engine/core/class/CodePressCMS.php | 10 ++++--
 engine/templates/layout.mustache   | 31 ++++++++++++++++++
 plugins/HTMLBlock/HTMLBlock.php    | 34 --------------------
 public/assets/js/app.js            | 51 ++++++++++++++++++++++++++++++
 4 files changed, 89 insertions(+), 37 deletions(-)

diff --git a/engine/core/class/CodePressCMS.php b/engine/core/class/CodePressCMS.php
index c2b73e7..c448faf 100644
--- a/engine/core/class/CodePressCMS.php
+++ b/engine/core/class/CodePressCMS.php
@@ -1167,8 +1167,11 @@ private function getGuidePage() {
      * @return string Breadcrumb HTML
      */
     public function generateBreadcrumb() {
+        // Sidebar toggle button (shown before home icon in breadcrumb)
+        $sidebarToggle = '<li class="breadcrumb-item sidebar-toggle-item"><button type="button" class="sidebar-toggle-btn" onclick="toggleSidebar()" title="Toggle Sidebar"><i class="bi bi-layout-sidebar-inset"></i></button></li>';
+        
         if (isset($_GET['search'])) {
-            return '<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="?page=' . $this->config['default_page'] . '&lang=' . $this->currentLanguage . '"></a></li><li class="breadcrumb-item"> > </li><li class="breadcrumb-item active">' . $this->t('search') . '</li></ol></nav>';
+            return '<nav aria-label="breadcrumb"><ol class="breadcrumb">' . $sidebarToggle . '<li class="breadcrumb-item"><a href="?page=' . $this->config['default_page'] . '&lang=' . $this->currentLanguage . '"><i class="bi bi-house"></i></a></li><li class="breadcrumb-item"> > </li><li class="breadcrumb-item active">' . $this->t('search') . '</li></ol></nav>';
         }
         
         $page = $_GET['page'] ?? $this->config['default_page'];
@@ -1176,12 +1179,13 @@ private function getGuidePage() {
         $page = preg_replace('/\.[^.]+$/', '', $page);
         
         if ($page === $this->config['default_page']) {
-            return '<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active"><i class="bi bi-house"></i></li></ol></nav>';
+            return '<nav aria-label="breadcrumb"><ol class="breadcrumb">' . $sidebarToggle . '<li class="breadcrumb-item active"><i class="bi bi-house"></i></li></ol></nav>';
         }
         
         $breadcrumb = '<nav aria-label="breadcrumb"><ol class="breadcrumb">';
         
-        // Start with home icon linking to default page (root)
+        // Start with sidebar toggle, then home icon linking to default page (root)
+        $breadcrumb .= $sidebarToggle;
         $breadcrumb .= '<li class="breadcrumb-item"><a href="?page=' . $this->config['default_page'] . '&lang=' . $this->currentLanguage . '"><i class="bi bi-house"></i></a></li>';
         
         // Split page path and build breadcrumb items
diff --git a/engine/templates/layout.mustache b/engine/templates/layout.mustache
index d41a9f5..40f41e9 100644
--- a/engine/templates/layout.mustache
+++ b/engine/templates/layout.mustache
@@ -127,6 +127,37 @@
             text-decoration: underline;
         }
         
+        /* Sidebar toggle button in breadcrumb */
+        .sidebar-toggle-item {
+            display: flex;
+            align-items: center;
+            margin-right: 0.5rem;
+        }
+        
+        .sidebar-toggle-btn {
+            padding: 0;
+            line-height: 1;
+            font-size: 1.1rem;
+            color: var(--header-bg) !important;
+            border: none !important;
+            background: transparent !important;
+            box-shadow: none !important;
+            cursor: pointer;
+        }
+        
+        .sidebar-toggle-btn:hover {
+            opacity: 0.7;
+        }
+        
+        /* Sidebar hide/show transition */
+        .sidebar-column {
+            transition: all 0.3s ease;
+        }
+        
+        .sidebar-hidden {
+            display: none !important;
+        }
+        
         /* Navigation section background */
         .navigation-section {
             background-color: var(--nav-bg) !important;
diff --git a/plugins/HTMLBlock/HTMLBlock.php b/plugins/HTMLBlock/HTMLBlock.php
index e229b21..26f65b9 100644
--- a/plugins/HTMLBlock/HTMLBlock.php
+++ b/plugins/HTMLBlock/HTMLBlock.php
@@ -65,40 +65,6 @@ class HTMLBlock
             }
         }
         
-        $content .= '
-                    <hr>
-                    <h6>Actions</h6>
-                    <div class="d-grid gap-2">
-                        <button class="btn btn-sm btn-outline-primary" onclick="refreshContent()">
-                            <i class="bi bi-arrow-clockwise"></i> Ververs Content
-                        </button>
-                        <button class="btn btn-sm btn-outline-secondary" onclick="toggleSidebar()">
-                            <i class="bi bi-layout-sidebar"></i> Toggle Sidebar
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <script>
-            function refreshContent() {
-                window.location.reload();
-            }
-            
-            function toggleSidebar() {
-                const sidebar = document.getElementById("site-sidebar");
-                const content = document.getElementById("site-content");
-                if (sidebar.style.display === "none") {
-                    sidebar.style.display = "";
-                    content.classList.remove("col-12");
-                    content.classList.add("col-lg-9", "col-md-8");
-                } else {
-                    sidebar.style.display = "none";
-                    content.classList.remove("col-lg-9", "col-md-8");
-                    content.classList.add("col-12");
-                }
-            }
-            </script>';
-        
         return $content;
     }
     
diff --git a/public/assets/js/app.js b/public/assets/js/app.js
index adce183..e25006d 100644
--- a/public/assets/js/app.js
+++ b/public/assets/js/app.js
@@ -1,10 +1,61 @@
 // Main application JavaScript
 // This file contains general application functionality
 
+/**
+ * Toggle sidebar visibility (open/close)
+ */
+function toggleSidebar() {
+    const sidebar = document.getElementById('site-sidebar');
+    const contentCol = sidebar ? sidebar.nextElementSibling || sidebar.parentElement.querySelector('.content-column') : null;
+    const icon = document.querySelector('.sidebar-toggle-btn i');
+
+    if (!sidebar) return;
+
+    sidebar.classList.toggle('sidebar-hidden');
+
+    // Adjust content column width and toggle icon
+    if (sidebar.classList.contains('sidebar-hidden')) {
+        if (contentCol) {
+            contentCol.classList.remove('col-lg-9', 'col-md-8');
+            contentCol.classList.add('col-12');
+        }
+        if (icon) {
+            icon.classList.remove('bi-layout-sidebar-inset');
+            icon.classList.add('bi-layout-sidebar');
+        }
+        sessionStorage.setItem('sidebarHidden', 'true');
+    } else {
+        if (contentCol) {
+            contentCol.classList.remove('col-12');
+            contentCol.classList.add('col-lg-9', 'col-md-8');
+        }
+        if (icon) {
+            icon.classList.remove('bi-layout-sidebar');
+            icon.classList.add('bi-layout-sidebar-inset');
+        }
+        sessionStorage.setItem('sidebarHidden', 'false');
+    }
+}
+
+/**
+ * Restore sidebar state from sessionStorage on page load
+ */
+function restoreSidebarState() {
+    if (sessionStorage.getItem('sidebarHidden') === 'true') {
+        const sidebar = document.getElementById('site-sidebar');
+        if (sidebar) {
+            toggleSidebar();
+        }
+    }
+}
+
 // Initialize application when DOM is ready
 document.addEventListener('DOMContentLoaded', function() {
     console.log('CodePress CMS initialized');
     
+    // Restore sidebar state
+    restoreSidebarState();
+    
     // Handle nested dropdowns for touch devices
     const dropdownSubmenus = document.querySelectorAll('.dropdown-submenu');