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>
2026-04-13 21:22:21 +03:00
parent fd29acbbdd
commit edb4c211a0
39 changed files with 380 additions and 1469 deletions
@@ -225,37 +225,7 @@
 </head>
 <body>
 <div class="app-layout">
-  <aside class="sidebar">
-    <div class="sb-brand">
-      <a href="/" class="sb-logo">Learn<span>Space</span></a>
-      <button class="sb-toggle" onclick="toggleSidebar()" title="Свернуть"><i data-lucide="panel-left-close" class="sb-icon"></i></button>
-    </div>
-    <button class="sb-link" onclick="lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
-    <a href="/dashboard" class="sb-link"><i data-lucide="home" class="sb-icon"></i><span class="sb-lbl">Дашборд</span></a>
-    <a href="/board"     class="sb-link" id="btn-board" style="display:none"><i data-lucide="layout-dashboard" class="sb-icon"></i><span class="sb-lbl">Доска</span></a>
-    <a href="/classes"   class="sb-link" id="btn-classes" style="display:none"><i data-lucide="graduation-cap" class="sb-icon"></i><span class="sb-lbl">Классы</span></a>
-    <a href="/library"   class="sb-link"><i data-lucide="book-open" class="sb-icon"></i><span class="sb-lbl">Библиотека</span></a>
-    <a href="/flashcards" class="sb-link active"><i data-lucide="layers" class="sb-icon"></i><span class="sb-lbl">Карточки</span></a>
-    <a href="/lab"           class="sb-link"><i data-lucide="atom"       class="sb-icon"></i><span class="sb-lbl">Лаборатория</span></a>
-    <a href="/biochem"           class="sb-link"><i data-lucide="flask-conical" class="sb-icon"></i><span class="sb-lbl">Биохимия</span></a>
-    <a href="/hangman"       class="sb-link"><i data-lucide="gamepad-2"  class="sb-icon"></i><span class="sb-lbl">Виселица</span></a>
-    <a href="/crossword" class="sb-link"><i data-lucide="grid-3x3" class="sb-icon"></i><span class="sb-lbl">Кроссворд</span></a>
-    <a href="/pet"       class="sb-link"><i data-lucide="heart" class="sb-icon"></i><span class="sb-lbl">Питомец</span></a>
-    <a href="/collection" class="sb-link"><i data-lucide="layers" class="sb-icon"></i><span class="sb-lbl">Коллекция</span></a>
-    <a href="/knowledge-map" class="sb-link"><i data-lucide="share-2"    class="sb-icon"></i><span class="sb-lbl">Карта знаний</span></a>
-      <a href="/red-book.html"           class="sb-link"><i data-lucide="leaf"     class="sb-icon"></i><span class="sb-lbl">Красная книга</span></a>
-    <div class="sb-spacer"></div>
-    <a href="/admin"     class="sb-link" id="btn-admin" style="display:none"><i data-lucide="settings" class="sb-icon"></i><span class="sb-lbl">Управление</span></a>
-    <div class="sb-foot">
-      <a href="/profile" class="sb-user-row" style="text-decoration:none">
-        <div class="sb-avatar" id="nav-avatar"></div>
-        <div class="sb-user-info">
-          <div class="sb-user-name" id="nav-user">—</div>
-          <span class="sb-logout" style="pointer-events:none">Мой профиль</span>
-        </div>
-      </a>
-    </div>
-  </aside>
+  <aside class="sidebar" id="app-sidebar"></aside>

  <main class="sb-content">
    <div class="fc-wrap">
@@ -395,6 +365,8 @@

 <script src="https://cdn.jsdelivr.net/npm/lucide@0.469.0/dist/umd/lucide.min.js"></script>
 <script src="/js/api.js"></script>
+  <script src="/js/sidebar.js"></script>
+  <script src="/js/notifications.js"></script>
 <script src="/js/search.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>