|
|
|
@@ -0,0 +1,81 @@
|
|
|
|
|
'use strict';
|
|
|
|
|
/*
|
|
|
|
|
* biochem-nav.js — межстраничная навигация модуля «Биохимия».
|
|
|
|
|
* Подключается на всех 5 страницах; вставляет полосу после шапки.
|
|
|
|
|
* Текущая страница определяется по location.pathname.
|
|
|
|
|
*/
|
|
|
|
|
(function () {
|
|
|
|
|
const PAGES = [
|
|
|
|
|
{ path: '/biochem', icon: 'M9 3h6M10 3v6l-5.4 9.3A1.5 1.5 0 0 0 5.9 21h12.2a1.5 1.5 0 0 0 1.3-2.3L14 9V3M7.5 15h9', label: 'Редактор' },
|
|
|
|
|
{ path: '/biochem-library', icon: 'M4 5a2 2 0 0 1 2-2h6v17H6a2 2 0 0 0-2 2z M20 5a2 2 0 0 0-2-2h-6v17h6a2 2 0 0 1 2 2z', label: 'Библиотека' },
|
|
|
|
|
{ path: '/biochem-reactions', icon: 'M13 2 3 14h9l-1 8 10-12h-9l1-8z', label: 'Реакции' },
|
|
|
|
|
{ path: '/biochem-properties', icon: 'M9 17H7A5 5 0 0 1 7 7h2 M15 7h2a5 5 0 0 1 0 10h-2 M9 12h6', label: 'Свойства' },
|
|
|
|
|
{ path: '/biochem-pathways', icon: 'M6 18h8 M3 22h18 M8 22V12l4-10 4 10v10 M10 9h4', label: 'Пути' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
function current() {
|
|
|
|
|
const p = location.pathname.replace(/\.html$/, '');
|
|
|
|
|
return PAGES.find(pg => p === pg.path || p.endsWith(pg.path)) || null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
const cur = current();
|
|
|
|
|
const nav = document.createElement('nav');
|
|
|
|
|
nav.className = 'biochem-subnav';
|
|
|
|
|
nav.setAttribute('aria-label', 'Разделы биохимии');
|
|
|
|
|
nav.innerHTML = PAGES.map(pg => {
|
|
|
|
|
const active = cur && cur.path === pg.path;
|
|
|
|
|
const href = pg.path + (pg.path === '/biochem' ? '' : '.html');
|
|
|
|
|
return `<a class="bsn-tab${active ? ' bsn-active' : ''}" href="${href}" aria-current="${active ? 'page' : 'false'}">
|
|
|
|
|
<svg class="ic xs" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="${pg.icon}"/></svg>
|
|
|
|
|
<span>${pg.label}</span>
|
|
|
|
|
</a>`;
|
|
|
|
|
}).join('');
|
|
|
|
|
|
|
|
|
|
// inject CSS once
|
|
|
|
|
if (!document.getElementById('biochem-subnav-style')) {
|
|
|
|
|
const s = document.createElement('style');
|
|
|
|
|
s.id = 'biochem-subnav-style';
|
|
|
|
|
s.textContent = `
|
|
|
|
|
.biochem-subnav {
|
|
|
|
|
display: flex; align-items: center; gap: 2px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
background: rgba(255,255,255,0.75); backdrop-filter: blur(8px);
|
|
|
|
|
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
|
|
|
|
flex-shrink: 0; position: sticky; top: 0; z-index: 60;
|
|
|
|
|
}
|
|
|
|
|
.bsn-tab {
|
|
|
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
|
|
|
padding: 10px 14px; border-radius: 8px;
|
|
|
|
|
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
|
|
|
|
color: var(--text-3, #56687A); text-decoration: none;
|
|
|
|
|
transition: background .14s, color .14s; border-bottom: 2px solid transparent;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
.bsn-tab .ic { stroke: currentColor; flex-shrink: 0; }
|
|
|
|
|
.bsn-tab:hover { background: rgba(155,93,229,0.07); color: var(--violet, #9B5DE5); }
|
|
|
|
|
.bsn-active {
|
|
|
|
|
color: var(--violet, #9B5DE5); font-weight: 700;
|
|
|
|
|
border-bottom-color: var(--violet, #9B5DE5);
|
|
|
|
|
}
|
|
|
|
|
.bsn-active:hover { background: rgba(155,93,229,0.07); }
|
|
|
|
|
@media (max-width: 560px) {
|
|
|
|
|
.biochem-subnav { padding: 0 8px; gap: 0; overflow-x: auto; }
|
|
|
|
|
.bsn-tab { padding: 9px 10px; font-size: 0.76rem; }
|
|
|
|
|
.bsn-tab span { display: none; }
|
|
|
|
|
.bsn-tab .ic { width: 16px; height: 16px; }
|
|
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
document.head.appendChild(s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// insert: after sidebar/notif-drop, before first content element inside sb-content
|
|
|
|
|
const sbContent = document.querySelector('.sb-content');
|
|
|
|
|
if (sbContent) {
|
|
|
|
|
sbContent.insertBefore(nav, sbContent.firstChild);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', render);
|
|
|
|
|
else render();
|
|
|
|
|
})();
|