feat: universal sidebar via sidebar.js + stale ID cleanup

- Add js/sidebar.js: generates full sidebar HTML into #app-sidebar,
  handles role-based visibility, active link (with prefix matching),
  toggle wiring, collapsed state, board/features/notif init
- Replace <aside class="sidebar">...</aside> with <aside id="app-sidebar">
  across all 35 standard-layout pages via scripts/apply-sidebar.js
- Add notifications.js to 5 pages that were missing it
- Fix api.js initPage(): skip toggle re-wiring if data-sb-wired set,
  fix active link selector .sb-item → .sb-link
- Remove stale sbl-*/nav-admin/btn-upload-nav getElementById calls
  that crashed after sidebar replacement (lab, classes, collection,
  crossword, hangman, knowledge-map, library, pet, profile)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
2026-04-13 21:22:21 +03:00
parent fd29acbbdd
commit edb4c211a0
39 changed files with 380 additions and 1469 deletions
+11 -9
View File
@@ -491,19 +491,21 @@ function initPage({ requireLogin = true } = {}) {
document.querySelector('.app-layout')?.classList.add('sb-collapsed');
}
// Sidebar toggle wiring
// Sidebar toggle wiring (skip if sidebar.js already wired it via data-sb-wired)
const togBtn = document.querySelector('.sb-toggle');
if (togBtn) togBtn.addEventListener('click', () => {
const layout = document.querySelector('.app-layout');
const collapsed = layout.classList.toggle('sb-collapsed');
localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '0');
});
if (togBtn && !togBtn.dataset.sbWired) {
togBtn.addEventListener('click', () => {
const layout = document.querySelector('.app-layout');
const collapsed = layout.classList.toggle('sb-collapsed');
localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '0');
});
}
// Sidebar active link
// Sidebar active link (fallback for pages without sidebar.js)
const currentPath = location.pathname.replace(/\.html$/, '').replace(/^\//, '') || 'dashboard';
document.querySelectorAll('.sidebar .sb-item').forEach(a => {
document.querySelectorAll('.sidebar .sb-link').forEach(a => {
const href = a.getAttribute('href')?.replace(/^\//, '').replace(/\.html$/, '') || '';
if (href === currentPath) a.classList.add('active');
if (href && href === currentPath) a.classList.add('active');
});
// Cosmetics