OTSSigns/OTSSignsTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance sidebar functionality with dynamic width adjustments and improved toggle interactions

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-04 16:22:51 -05:00
parent f392e5d016
commit d8f8c0f916
4 changed files with 308 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
custom/otssignange/css/override.css
View File

@@ -48,7 +48,7 @@ body {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 260px; width: auto !important;
height: 100vh; height: 100vh;
background-color: #08132a; background-color: #08132a;
border-right: 1px solid rgba(255, 255, 255, 0.06); border-right: 1px solid rgba(255, 255, 255, 0.06);
@@ -63,12 +63,14 @@ body {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 260px; margin-left: calc(var(--ots-sidebar-width, 240px)) !important;
} }
.ots-main, .ots-main,
#page-wrapper { #page-wrapper {
position: relative; position: relative;
margin-left: calc(var(--ots-sidebar-width, 240px) - 1px) !important;
transition: margin-left 150ms ease-out;
} }
.ots-content { .ots-content {
@@ -168,18 +170,27 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 8px 12px; padding: 8px 16px 8px 12px;
color: #c8d5ee; color: #f9fbff;
text-decoration: none; text-decoration: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative; position: relative;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border-left: 2px solid transparent; border-left: 2px solid transparent;
margin: 3px 10px; margin: 3px 0;
border-radius: 12px; border-radius: 12px;
min-height: 48px; min-height: 48px;
line-height: 1.25; line-height: 1.25;
width: 100%;
box-sizing: border-box;
padding-right: 48px; /* reserve space for caret */
}
/* Force readable text in sidebar links */
.ots-sidebar a,
.ots-sidebar .ots-nav-text {
color: #f9fbff;
} }
.ots-sidebar li.sidebar-list > a:hover { .ots-sidebar li.sidebar-list > a:hover {
@@ -198,6 +209,13 @@ body {
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
} }
.ots-sidebar li.sidebar-list.active > a .ots-nav-text,
.ots-sidebar li.sidebar-list > a.active .ots-nav-text,
.ots-sidebar li.sidebar-main.active > a .ots-nav-text,
.ots-sidebar li.sidebar-main > a.active .ots-nav-text {
color: #0b1221;
}
.ots-sidebar .ots-nav-icon { .ots-sidebar .ots-nav-icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
@@ -302,6 +320,11 @@ body {
padding: 10px; padding: 10px;
} }
/* Hide caret when collapsed */
.ots-sidebar.collapsed .sidebar-group-caret {
display: none !important;
}
/* Center icons when collapsed */ /* Center icons when collapsed */
.ots-sidebar.collapsed .ots-nav-icon { .ots-sidebar.collapsed .ots-nav-icon {
justify-self: center !important; justify-self: center !important;
@@ -326,24 +349,54 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 10px 12px; padding: 10px 16px 10px 12px;
margin: 6px 10px; margin: 6px 0;
border-radius: 12px; border-radius: 12px;
color: #d7e2f8; color: #f9fbff;
text-decoration: none; text-decoration: none;
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative; /* for absolutely positioned caret */
width: 100%;
box-sizing: border-box;
padding-right: 48px; /* reserve space for caret */
}
/* Highlight parent item like screenshot */
.ots-sidebar .sidebar-group.is-open > .sidebar-group-toggle,
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"],
.ots-sidebar .sidebar-group-toggle.active {
background: #ffffff;
color: #0b1221 !important;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}
.ots-sidebar .sidebar-group.is-open > .sidebar-group-toggle .ots-nav-text,
.ots-sidebar .sidebar-group.is-open > .sidebar-group-toggle .ots-nav-icon,
.ots-sidebar .sidebar-group.is-open > .sidebar-group-toggle .sidebar-group-caret,
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"] .ots-nav-text,
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"] .ots-nav-icon,
.ots-sidebar .sidebar-group-toggle[aria-expanded="true"] .sidebar-group-caret,
.ots-sidebar .sidebar-group-toggle.active .ots-nav-text,
.ots-sidebar .sidebar-group-toggle.active .ots-nav-icon,
.ots-sidebar .sidebar-group-toggle.active .sidebar-group-caret {
color: #0b1221 !important;
} }
.sidebar-group-toggle:hover { .sidebar-group-toggle:hover {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.1);
color: #ffffff; color: #ffffff;
} }
.sidebar-group-caret { .sidebar-group-caret {
margin-left: auto; position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.85;
cursor: pointer;
pointer-events: auto;
} }
.sidebar-submenu { .sidebar-submenu {
@@ -351,15 +404,36 @@ body {
margin: 4px 0 8px; margin: 4px 0 8px;
padding: 0 0 0 12px; padding: 0 0 0 12px;
border-left: 1px solid rgba(255, 255, 255, 0.08); border-left: 1px solid rgba(255, 255, 255, 0.08);
display: none;
} }
.sidebar-group.is-open .sidebar-group-caret { .sidebar-group.is-open .sidebar-group-caret {
transform: rotate(180deg); transform: rotate(180deg);
} }
.sidebar-group.is-open .sidebar-submenu {
display: block;
}
.sidebar-submenu .sidebar-list > a { .sidebar-submenu .sidebar-list > a {
margin: 4px 10px 4px 18px; margin: 4px 0;
background: rgba(255, 255, 255, 0.04); background: rgba(15, 23, 42, 0.6);
width: 100%;
box-sizing: border-box;
padding-right: 48px; /* keep caret space for nested items */
/* Slight indent for submenu items */
padding-left: 28px !important;
border-left: 4px solid rgba(255, 255, 255, 0.9);
border-radius: 12px;
color: #f9fbff;
}
/* Ensure parent toggles and top-level links span full sidebar width */
.ots-sidebar .sidebar-group-toggle,
.ots-sidebar li.sidebar-list > a,
.ots-sidebar li.sidebar-main > a {
width: 100% !important;
box-sizing: border-box !important;
} }
.sidebar-submenu .sidebar-list > a:hover { .sidebar-submenu .sidebar-list > a:hover {
@@ -373,42 +447,7 @@ body {
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
} }
.sidebar-footer { /* sidebar-footer removed; account bar intentionally omitted */
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(15, 23, 42, 0.6);
}
.sidebar-theme-toggle {
width: 36px;
height: 36px;
border-radius: 10px;
border: 0;
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
}
.sidebar-theme-toggle:hover {
background: rgba(255, 255, 255, 0.16);
}
.user-role {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--color-text-secondary);
margin-bottom: 4px;
}
.nav-section-divider { .nav-section-divider {
padding: 12px 16px 8px; padding: 12px 16px 8px;
@@ -2860,6 +2899,49 @@ h1, h2, h3, h4, h5, h6,
} }
/* All labels must be readable */ /* All labels must be readable */
/* Strong override: force sidebar items to show icon then text (left-aligned) */
#sidebar-wrapper .sidebar-list a,
#sidebar-wrapper .sidebar-main a,
.ots-sidebar .sidebar-group-toggle,
.ots-sidebar .sidebar-list > a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
white-space: nowrap !important;
}
.ots-sidebar .ots-nav-icon,
#sidebar-wrapper .sidebar-list .ots-nav-icon,
#sidebar-wrapper .sidebar-main .ots-nav-icon {
display: inline-flex !important;
width: 26px !important;
height: 26px !important;
margin-right: 8px !important;
margin-left: 0 !important;
text-align: center !important;
vertical-align: middle !important;
}
.ots-sidebar .ots-nav-text,
#sidebar-wrapper .sidebar-list .ots-nav-text {
display: inline-block !important;
flex: 1 1 auto !important;
order: 2 !important;
}
.ots-sidebar .ots-nav-icon { order: 1 !important; }
/* Ensure group caret stays to the far right */
.sidebar-group-caret { margin-left: 12px !important; order: 3 !important; }
/* Safety: collapse any grid-template overrides */
.ots-sidebar .sidebar-group-toggle, .ots-sidebar .sidebar-list > a { grid-template-columns: none !important; }
/* Reduce submenu left border padding so text fits better */
.sidebar-submenu { padding-left: 8px !important; }
label, label,
.label, .label,
.form-label, .form-label,

58
custom/otssignange/js/theme.js
View File

@@ -50,6 +50,8 @@
sidebar.classList.toggle('collapsed'); sidebar.classList.toggle('collapsed');
body.classList.toggle('ots-sidebar-collapsed', nowCollapsed); body.classList.toggle('ots-sidebar-collapsed', nowCollapsed);
localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, nowCollapsed ? 'true' : 'false'); localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, nowCollapsed ? 'true' : 'false');
// Update measured sidebar width when collapsed state changes
updateSidebarWidth();
}); });
} }
@@ -69,6 +71,20 @@
}); });
} }
/**
* Measure sidebar width and set CSS variable for layout
*/
function updateSidebarWidth() {
const sidebar = document.querySelector('.ots-sidebar');
if (!sidebar) return;
// If collapsed, use the known collapsed width; otherwise use measured width
const collapsed = sidebar.classList.contains('collapsed');
const base = collapsed ? 88 : sidebar.offsetWidth || sidebar.getBoundingClientRect().width || 240;
const padding = 5; // user requested ~5px padding
const value = Math.max(88, Math.round(base + padding));
document.documentElement.style.setProperty('--ots-sidebar-width', `${value}px`);
}
/** /**
* Initialize sidebar section collapse/expand functionality * Initialize sidebar section collapse/expand functionality
*/ */
@@ -76,6 +92,15 @@
const groupToggles = document.querySelectorAll('.sidebar-group-toggle'); const groupToggles = document.querySelectorAll('.sidebar-group-toggle');
groupToggles.forEach(toggle => { groupToggles.forEach(toggle => {
const group = toggle.closest('.sidebar-group');
const submenu = group ? group.querySelector('.sidebar-submenu') : null;
const caret = toggle.querySelector('.sidebar-group-caret');
if (submenu) {
const isOpen = group.classList.contains('is-open');
submenu.style.display = isOpen ? 'block' : 'none';
toggle.setAttribute('aria-expanded', isOpen.toString());
}
toggle.addEventListener('click', function(e) { toggle.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
@@ -88,8 +113,36 @@
toggle.setAttribute('aria-expanded', (!isOpen).toString()); toggle.setAttribute('aria-expanded', (!isOpen).toString());
submenu.style.display = isOpen ? 'none' : 'block'; submenu.style.display = isOpen ? 'none' : 'block';
}); });
if (caret) {
caret.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggle.click();
}); });
} }
});
// Capture-phase handler to override any conflicting listeners
document.addEventListener('click', function(e) {
const caret = e.target.closest('.sidebar-group-caret');
const toggle = e.target.closest('.sidebar-group-toggle');
const target = toggle || (caret ? caret.closest('.sidebar-group-toggle') : null);
if (!target) return;
e.preventDefault();
e.stopPropagation();
const group = target.closest('.sidebar-group');
const submenu = group ? group.querySelector('.sidebar-submenu') : null;
if (!submenu) return;
const isOpen = group.classList.contains('is-open');
group.classList.toggle('is-open', !isOpen);
target.setAttribute('aria-expanded', (!isOpen).toString());
submenu.style.display = isOpen ? 'none' : 'block';
}, true);
}
/** /**
* Initialize dropdown menus * Initialize dropdown menus
@@ -273,6 +326,8 @@
} else { } else {
sidebar.classList.add('mobile'); sidebar.classList.add('mobile');
} }
// Recompute sidebar width on resize
updateSidebarWidth();
}); });
} }
@@ -405,6 +460,9 @@
enhanceTables(); enhanceTables();
makeResponsive(); makeResponsive();
initChartSafeguard(); initChartSafeguard();
// Set initial sidebar width variable and keep it updated
updateSidebarWidth();
window.addEventListener('resize', updateSidebarWidth);
} }
// Wait for DOM to be ready // Wait for DOM to be ready

53
custom/otssignange/views/authed-sidebar.twig
View File

@@ -27,8 +27,8 @@
{% set scheduleCount = currentUser.featureEnabledCount(["schedule.view", "daypart.view"]) %} {% set scheduleCount = currentUser.featureEnabledCount(["schedule.view", "daypart.view"]) %}
{% if scheduleCount > 0 %} {% if scheduleCount > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="scheduling">
<span class="ots-nav-icon fa fa-calendar" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-calendar" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Scheduling" %}</span> <span class="ots-nav-text">{% trans "Scheduling" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -57,8 +57,8 @@
{% set countViewable = currentUser.featureEnabledCount(["library.view", "playlist.view", "dataset.view", "menuBoard.view"]) %} {% set countViewable = currentUser.featureEnabledCount(["library.view", "playlist.view", "dataset.view", "menuBoard.view"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="media">
<span class="ots-nav-icon fa fa-picture-o" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-picture-o" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Media" %}</span> <span class="ots-nav-text">{% trans "Media" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -105,8 +105,8 @@
{% set countViewable = currentUser.featureEnabledCount(["campaign.view", "layout.view", "template.view", "resolution.view"]) %} {% set countViewable = currentUser.featureEnabledCount(["campaign.view", "layout.view", "template.view", "resolution.view"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="design">
<span class="ots-nav-icon fa fa-paint-brush" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-paint-brush" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Design" %}</span> <span class="ots-nav-text">{% trans "Design" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -153,8 +153,8 @@
{% set countViewable = currentUser.featureEnabledCount(["displays.view", "displaygroup.view", "displayprofile.view", "playersoftware.view", "command.view", "display.syncView"]) %} {% set countViewable = currentUser.featureEnabledCount(["displays.view", "displaygroup.view", "displayprofile.view", "playersoftware.view", "command.view", "display.syncView"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="displays">
<span class="ots-nav-icon fa fa-desktop" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-desktop" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Displays" %}</span> <span class="ots-nav-text">{% trans "Displays" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -225,8 +225,8 @@
{% set countViewable = currentUser.featureEnabledCount(["usergroup.view", "module.view", "transition.view", "task.view", "tag.view", "font.view"]) %} {% set countViewable = currentUser.featureEnabledCount(["usergroup.view", "module.view", "transition.view", "task.view", "tag.view", "font.view"]) %}
{% if countViewable > 0 or userMenuViewable %} {% if countViewable > 0 or userMenuViewable %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="settings">
<span class="ots-nav-icon fa fa-cog" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-cog" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Settings" %}</span> <span class="ots-nav-text">{% trans "Settings" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -327,8 +327,8 @@
{% set countViewable = currentUser.featureEnabledCount(["report.view", "report.scheduling", "report.saving"]) %} {% set countViewable = currentUser.featureEnabledCount(["report.view", "report.scheduling", "report.saving"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="reporting">
<span class="ots-nav-icon fa fa-bar-chart" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-bar-chart" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Reporting" %}</span> <span class="ots-nav-text">{% trans "Reporting" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -366,8 +366,8 @@
{% set countViewable = currentUser.featureEnabledCount(["log.view", "sessions.view", "auditlog.view", "fault.view"]) %} {% set countViewable = currentUser.featureEnabledCount(["log.view", "sessions.view", "auditlog.view", "fault.view"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="advanced">
<span class="ots-nav-icon fa fa-shield" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-shield" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Advanced" %}</span> <span class="ots-nav-text">{% trans "Advanced" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -414,8 +414,8 @@
{% set countViewable = currentUser.featureEnabledCount(["developer.edit"]) %} {% set countViewable = currentUser.featureEnabledCount(["developer.edit"]) %}
{% if countViewable > 0 %} {% if countViewable > 0 %}
<li class="sidebar-group"> <li class="sidebar-group is-open">
<a class="sidebar-group-toggle" href="#" aria-expanded="true"> <a class="sidebar-group-toggle" href="#" aria-expanded="true" data-group="developer">
<span class="ots-nav-icon fa fa-code" aria-hidden="true"></span> <span class="ots-nav-icon fa fa-code" aria-hidden="true"></span>
<span class="ots-nav-text">{% trans "Developer" %}</span> <span class="ots-nav-text">{% trans "Developer" %}</span>
<span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span> <span class="sidebar-group-caret fa fa-chevron-down" aria-hidden="true"></span>
@@ -435,25 +435,4 @@
</ul> </ul>
</div> </div>
<div class="sidebar-footer">
<div class="sidebar-user">
<div class="user-avatar-lg" aria-hidden="true">
{{ currentUser.userName|slice(0, 1)|upper }}
</div>
<div class="user-details">
<div class="user-role">
<i class="fa fa-shield" aria-hidden="true"></i>
{% if currentUser.isSuperAdmin() %}
{% trans "Super Admin" %}
{% else %}
{% trans "User" %}
{% endif %}
</div>
<div class="user-name">{{ currentUser.userName }}</div>
</div>
</div>
<button class="sidebar-theme-toggle" type="button" aria-label="{% trans "Toggle theme" %}">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</button>
</div>
</div> </div>

101
custom/otssignange/views/theme-scripts.twig
View File

@@ -10,25 +10,59 @@
sidebarCollapsed: 'otsTheme:sidebarCollapsed' sidebarCollapsed: 'otsTheme:sidebarCollapsed'
}; };
/**
* Measure sidebar width and set CSS variable for layout
*/
function updateSidebarWidth() {
const sidebar = document.querySelector('.ots-sidebar');
if (!sidebar) return;
const collapsed = sidebar.classList.contains('collapsed');
const base = collapsed ? 88 : sidebar.offsetWidth || sidebar.getBoundingClientRect().width || 240;
const padding = 5;
const value = Math.max(88, Math.round(base + padding));
document.documentElement.style.setProperty('--ots-sidebar-width', `${value}px`);
}
/** /**
* Initialize sidebar toggle functionality * Initialize sidebar toggle functionality
*/ */
function initSidebarToggle() { function initSidebarToggle() {
const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]'); const toggleBtn = document.querySelector('[data-action="toggle-sidebar"]');
const sidebar = document.querySelector('.ots-sidebar'); const sidebar = document.querySelector('.ots-sidebar');
const collapseBtn = document.querySelector('.sidebar-collapse-btn');
const body = document.body;
if (!toggleBtn || !sidebar) return; if (!sidebar) return;
if (toggleBtn) {
toggleBtn.addEventListener('click', function(e) { toggleBtn.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
sidebar.classList.toggle('active'); sidebar.classList.toggle('active');
}); });
}
if (collapseBtn) {
const isCollapsed = localStorage.getItem(STORAGE_KEYS.sidebarCollapsed) === 'true';
if (isCollapsed) {
sidebar.classList.add('collapsed');
body.classList.add('ots-sidebar-collapsed');
}
collapseBtn.addEventListener('click', function(e) {
e.preventDefault();
const nowCollapsed = !sidebar.classList.contains('collapsed');
sidebar.classList.toggle('collapsed');
body.classList.toggle('ots-sidebar-collapsed', nowCollapsed);
localStorage.setItem(STORAGE_KEYS.sidebarCollapsed, nowCollapsed ? 'true' : 'false');
updateSidebarWidth();
});
}
// Close sidebar when clicking outside on mobile // Close sidebar when clicking outside on mobile
document.addEventListener('click', function(e) { document.addEventListener('click', function(e) {
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
const isClickInsideSidebar = sidebar.contains(e.target); const isClickInsideSidebar = sidebar.contains(e.target);
const isClickOnToggle = toggleBtn.contains(e.target); const isClickOnToggle = toggleBtn && toggleBtn.contains(e.target);
if (!isClickInsideSidebar && !isClickOnToggle && sidebar.classList.contains('active')) { if (!isClickInsideSidebar && !isClickOnToggle && sidebar.classList.contains('active')) {
sidebar.classList.remove('active'); sidebar.classList.remove('active');
@@ -37,6 +71,65 @@
}); });
} }
/**
* Initialize sidebar section collapse/expand functionality
*/
function initSidebarSectionToggles() {
const groupToggles = document.querySelectorAll('.sidebar-group-toggle');
groupToggles.forEach(toggle => {
const group = toggle.closest('.sidebar-group');
const submenu = group ? group.querySelector('.sidebar-submenu') : null;
const caret = toggle.querySelector('.sidebar-group-caret');
if (submenu) {
const isOpen = group.classList.contains('is-open');
submenu.style.display = isOpen ? 'block' : 'none';
toggle.setAttribute('aria-expanded', isOpen.toString());
}
toggle.addEventListener('click', function(e) {
e.preventDefault();
const group = toggle.closest('.sidebar-group');
const submenu = group ? group.querySelector('.sidebar-submenu') : null;
if (!submenu) return;
const isOpen = group.classList.contains('is-open');
group.classList.toggle('is-open', !isOpen);
toggle.setAttribute('aria-expanded', (!isOpen).toString());
submenu.style.display = isOpen ? 'none' : 'block';
});
if (caret) {
caret.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggle.click();
});
}
});
// Capture-phase handler to override any conflicting listeners
document.addEventListener('click', function(e) {
const caret = e.target.closest('.sidebar-group-caret');
const toggle = e.target.closest('.sidebar-group-toggle');
const target = toggle || (caret ? caret.closest('.sidebar-group-toggle') : null);
if (!target) return;
e.preventDefault();
e.stopPropagation();
const group = target.closest('.sidebar-group');
const submenu = group ? group.querySelector('.sidebar-submenu') : null;
if (!submenu) return;
const isOpen = group.classList.contains('is-open');
group.classList.toggle('is-open', !isOpen);
target.setAttribute('aria-expanded', (!isOpen).toString());
submenu.style.display = isOpen ? 'none' : 'block';
}, true);
}
/** /**
* Initialize dropdown menus * Initialize dropdown menus
*/ */
@@ -224,6 +317,7 @@
} else { } else {
sidebar.classList.add('mobile'); sidebar.classList.add('mobile');
} }
updateSidebarWidth();
}); });
} }
@@ -353,6 +447,7 @@
*/ */
function init() { function init() {
initSidebarToggle(); initSidebarToggle();
initSidebarSectionToggles();
initDropdowns(); initDropdowns();
initSearch(); initSearch();
initPageInteractions(); initPageInteractions();
@@ -360,6 +455,8 @@
enhanceTables(); enhanceTables();
makeResponsive(); makeResponsive();
initChartSafeguard(); initChartSafeguard();
updateSidebarWidth();
window.addEventListener('resize', updateSidebarWidth);
} }
// Wait for DOM to be ready // Wait for DOM to be ready