Maxim Dolgolyov
195 lines
9.1 KiB
JavaScript
195 lines
9.1 KiB
JavaScript
// Universal sidebar — LearnSpace
|
|
// Generates full sidebar HTML into <aside id="app-sidebar">
|
|
// Load after api.js, before page-specific scripts.
|
|
(function () {
|
|
'use strict';
|
|
const el = document.getElementById('app-sidebar');
|
|
if (!el) return;
|
|
|
|
const user = (typeof LS !== 'undefined') ? LS.getUser?.() : null;
|
|
const role = user?.role || 'student';
|
|
const isTch = ['teacher', 'admin'].includes(role);
|
|
const isAdm = role === 'admin';
|
|
const isStu = role === 'student';
|
|
|
|
// Clean current path (strip .html extension)
|
|
const path = location.pathname.replace(/\.html$/, '');
|
|
|
|
// Active link: exact match OR prefix match (e.g. /biochem active for /biochem-library)
|
|
function isActive(href) {
|
|
const h = href.replace(/\.html$/, '');
|
|
if (path === h) return true;
|
|
if (h !== '/' && path.startsWith(h + '-')) return true;
|
|
if (h !== '/' && path.startsWith(h + '/')) return true;
|
|
return false;
|
|
}
|
|
|
|
function esc(s) {
|
|
return s ? String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"') : '';
|
|
}
|
|
|
|
// Build an <a> sidebar link
|
|
function L(href, icon, label, { id = '', cls = '', hidden = false } = {}) {
|
|
const active = isActive(href) ? ' active' : '';
|
|
const classes = ['sb-link', active, cls].filter(Boolean).join(' ');
|
|
const idA = id ? ` id="${id}"` : '';
|
|
const hidA = hidden ? ' style="display:none"' : '';
|
|
return `<a href="${esc(href)}" class="${classes}"${idA}${hidA}><i data-lucide="${icon}" class="sb-icon"></i><span class="sb-lbl">${label}</span></a>`;
|
|
}
|
|
|
|
// Collapsible group: section header + body. State persisted in localStorage.
|
|
function G(slug, label, body) {
|
|
const stored = localStorage.getItem('ls_sb_g_' + slug);
|
|
const collapsed = stored === '1';
|
|
return `<div class="sb-group${collapsed ? ' collapsed' : ''}" data-sb-group="${slug}">
|
|
<button class="sb-group-hdr" onclick="window.__lsSbToggle('${slug}')">
|
|
<span class="sb-lbl sb-group-lbl">${label}</span>
|
|
<i data-lucide="chevron-down" class="sb-group-chev"></i>
|
|
</button>
|
|
<div class="sb-group-body">${body}</div>
|
|
</div>`;
|
|
}
|
|
|
|
const initials = (user?.name || 'LS').split(' ').slice(0, 2).map(w => (w[0] || '').toUpperCase()).join('') || 'LS';
|
|
const displayName = esc(user?.name || user?.email || '—');
|
|
|
|
el.innerHTML = `
|
|
<div class="sb-brand">
|
|
<a href="/dashboard" class="sb-logo"><span class="sb-lbl">Learn<span>Space</span></span></a>
|
|
<button class="sb-toggle" title="Свернуть меню" data-sb-wired="1"><i data-lucide="chevron-left" class="sb-icon"></i></button>
|
|
</div>
|
|
<nav class="sb-nav">
|
|
<button class="sb-link" onclick="typeof lsSearchOpen!=='undefined'&&lsSearchOpen()" title="Ctrl+K"><i data-lucide="search" class="sb-icon"></i><span class="sb-lbl">Поиск</span></button>
|
|
${L('/dashboard', 'home', 'Дашборд')}
|
|
${L('/sitemap', 'map', 'Путеводитель')}
|
|
${L('/teacher-guide', 'book-marked', 'Руководство', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
|
|
${G('learning', 'Учебный процесс', `
|
|
${L('/classes', 'graduation-cap', 'Классы', { id: 'btn-classes', hidden: !isTch })}
|
|
${L('/my-students', 'user-plus', 'Мои ученики', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
${L('/classroom', 'presentation', 'Онлайн-урок')}
|
|
${L('/lesson-history','archive', 'Архив уроков')}
|
|
${L('/live-quiz', 'radio', 'Live-квиз', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
${L('/board', 'layout-dashboard', 'Доска', { id: 'btn-board', hidden: true })}
|
|
`)}
|
|
|
|
${G('content', 'Контент', `
|
|
${L('/textbooks', 'book-open-text', 'Учебники')}
|
|
${L('/library', 'book-open', 'Библиотека')}
|
|
${L('/theory', 'brain', 'Теория')}
|
|
${L('/knowledge-map', 'share-2', 'Карта знаний')}
|
|
${L('/question-bank', 'database', 'Банк вопросов', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
${L('/exam-prep/math9', 'clipboard-check', 'Подготовка к экзамену 9')}
|
|
`)}
|
|
|
|
${G('practice', 'Практика и игры', `
|
|
${L('/lab', 'atom', 'Лаборатория')}
|
|
${L('/biochem', 'flask-conical', 'Биохимия')}
|
|
${L('/red-book', 'leaf', 'Красная книга')}
|
|
${L('/crossword', 'grid-3x3', 'Кроссворд')}
|
|
${L('/hangman', 'gamepad-2', 'Виселица')}
|
|
${L('/pet', 'heart', 'Питомец')}
|
|
${L('/collection', 'layers', 'Коллекция')}
|
|
`)}
|
|
|
|
${isTch ? G('management', 'Отчёты и управление', `
|
|
${L('/analytics', 'bar-chart-2', 'Аналитика', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
${L('/gradebook', 'table', 'Журнал', { cls: 'sb-teacher-only', hidden: !isTch })}
|
|
${L('/admin', 'settings', 'Управление', { id: 'btn-admin', hidden: !isTch })}
|
|
`) : ''}
|
|
</nav>
|
|
<div style="padding:4px 2px;flex-shrink:0">
|
|
${isStu ? '<button class="sb-link" id="btn-join" style="display:none" onclick="typeof openJoinModal!==\'undefined\'&&openJoinModal()"><i data-lucide="user-plus" class="sb-icon"></i><span class="sb-lbl">Вступить в класс</span></button>' : ''}
|
|
<div id="notif-wrap">
|
|
<button class="sb-link" id="notif-btn" onclick="LS.notif?.toggle()">
|
|
<i data-lucide="bell" class="sb-icon"></i><span class="sb-lbl">Уведомления</span>
|
|
<span class="sb-badge" id="notif-badge" style="display:none"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="sb-foot">
|
|
<a href="/profile" class="sb-user-row" style="text-decoration:none">
|
|
<div class="sb-avatar" id="nav-avatar">${esc(initials)}</div>
|
|
<div class="sb-user-info">
|
|
<div class="sb-user-name" id="nav-user">${displayName}</div>
|
|
<span class="sb-logout" style="pointer-events:none">Мой профиль</span>
|
|
</div>
|
|
</a>
|
|
</div>`;
|
|
|
|
// Inject group styles once
|
|
if (!document.getElementById('sb-group-styles')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'sb-group-styles';
|
|
style.textContent = `
|
|
.sb-group { margin: 10px 0 2px; }
|
|
.sb-group-hdr {
|
|
width: 100%; padding: 6px 14px 4px; border: none; background: none;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
font-family: 'Manrope', system-ui, sans-serif;
|
|
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
|
|
color: var(--text-3, #56687A); text-transform: uppercase;
|
|
cursor: pointer; transition: color .12s, opacity .12s;
|
|
opacity: 0.72;
|
|
}
|
|
.sb-group-hdr:hover { color: var(--violet, #9B5DE5); opacity: 1; }
|
|
.sb-group-chev {
|
|
width: 12px; height: 12px; transition: transform .18s;
|
|
}
|
|
.sb-group.collapsed .sb-group-chev { transform: rotate(-90deg); }
|
|
.sb-group-body {
|
|
display: flex; flex-direction: column;
|
|
max-height: 800px; overflow: hidden;
|
|
transition: max-height .25s ease, opacity .18s;
|
|
opacity: 1;
|
|
}
|
|
.sb-group.collapsed .sb-group-body {
|
|
max-height: 0; opacity: 0; pointer-events: none;
|
|
}
|
|
/* When sidebar collapsed (icon-only mode) — hide group headers */
|
|
.app-layout.sb-collapsed .sb-group-hdr { display: none; }
|
|
.app-layout.sb-collapsed .sb-group-body { max-height: none !important; opacity: 1 !important; pointer-events: auto !important; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// Toggle handler (global so onclick works)
|
|
window.__lsSbToggle = function (slug) {
|
|
const g = el.querySelector(`[data-sb-group="${slug}"]`);
|
|
if (!g) return;
|
|
const collapsed = g.classList.toggle('collapsed');
|
|
try { localStorage.setItem('ls_sb_g_' + slug, collapsed ? '1' : '0'); } catch {}
|
|
};
|
|
|
|
// Insert notif-drop sibling after <aside> if not already present
|
|
if (!document.getElementById('notif-drop')) {
|
|
const nd = document.createElement('div');
|
|
nd.className = 'notif-drop';
|
|
nd.id = 'notif-drop';
|
|
el.insertAdjacentElement('afterend', nd);
|
|
}
|
|
|
|
// Apply collapsed state
|
|
if (localStorage.getItem('ls_sb_collapsed') === '1') {
|
|
document.querySelector('.app-layout')?.classList.add('sb-collapsed');
|
|
}
|
|
|
|
// Wire sidebar toggle
|
|
el.querySelector('.sb-toggle')?.addEventListener('click', () => {
|
|
const layout = document.querySelector('.app-layout');
|
|
if (!layout) return;
|
|
const collapsed = layout.classList.toggle('sb-collapsed');
|
|
localStorage.setItem('ls_sb_collapsed', collapsed ? '1' : '0');
|
|
});
|
|
|
|
// Re-render Lucide icons
|
|
if (window.lucide) lucide.createIcons();
|
|
|
|
// Async: board visibility, feature flags, notifications
|
|
if (typeof LS !== 'undefined') {
|
|
LS.showBoardIfAllowed?.();
|
|
LS.hideDisabledFeatures?.();
|
|
LS.notif?.init?.();
|
|
}
|
|
})();
|