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.
This commit is contained in:
parent
b52d3a11be
commit
e3a3cc5b6d
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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');
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user