fix(biochem): статичный subnav без мигания + редизайн
Проблема: динамическая вставка через JS вызывала мигание (nav появлялся через ~100ms после первого пейнта). Решение: nav — статичный HTML в каждой странице, CSS — в <head>. Активная вкладка проставлена в HTML (class bsn-active) — нет JS, нет мигания, работает с первого байта. Редизайн .biochem-subnav: - frosted glass (backdrop-filter blur 14px, rgba 0.92) - активная вкладка: фиолетовый фон-пилюля + нижняя линия 2.5px - hover: мягкий фиолетовый фон - mobile <560px: только иконки (bsn-label display:none) - overflow-x auto + scrollbar-width:none — горизонтальная прокрутка без полосы - biochem-nav.js сведён к no-op комментарию Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -278,7 +278,44 @@
|
||||
.page-header { padding: 10px; }
|
||||
.filters-row { padding: 8px 10px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Biochem subnav ─────────────────────────────────────────────── */
|
||||
.biochem-subnav {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
||||
flex-shrink: 0; overflow-x: auto;
|
||||
scrollbar-width: none; position: relative;
|
||||
}
|
||||
.biochem-subnav::-webkit-scrollbar { display: none; }
|
||||
.biochem-subnav::after {
|
||||
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
|
||||
height: 1.5px; background: rgba(15,23,42,0.07);
|
||||
}
|
||||
.bsn-tab {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 11px 14px; border-radius: 9px; margin: 5px 1px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap;
|
||||
transition: background .15s, color .15s; position: relative;
|
||||
}
|
||||
.bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; }
|
||||
.bsn-active {
|
||||
background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700;
|
||||
}
|
||||
.bsn-active::after {
|
||||
content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px;
|
||||
height: 2.5px; border-radius: 99px; background: #9B5DE5;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.biochem-subnav { padding: 0 6px; }
|
||||
.bsn-tab { padding: 10px 10px; gap: 0; }
|
||||
.bsn-tab .bsn-label { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout" id="app">
|
||||
@@ -286,6 +323,9 @@
|
||||
<div class="notif-drop" id="notif-drop"></div>
|
||||
|
||||
<div class="sb-content">
|
||||
<nav class="biochem-subnav" aria-label="Разделы биохимии">
|
||||
<a class="bsn-tab" href="/biochem"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab bsn-active" href="/biochem-library" aria-current="page"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab" href="/biochem-reactions"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab" href="/biochem-properties"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab" href="/biochem-pathways"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
|
||||
</nav>
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M9 3h6m-4.5 0v5.5l-4 7.5a1 1 0 0 0 .9 1.5h8.2a1 1 0 0 0 .9-1.5l-4-7.5V3"/></svg></div>
|
||||
|
||||
@@ -338,7 +338,44 @@
|
||||
.path-chip { font-size: 0.68rem; padding: 4px 10px; }
|
||||
.side-panel { max-height: 45vh; }
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Biochem subnav ─────────────────────────────────────────────── */
|
||||
.biochem-subnav {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
||||
flex-shrink: 0; overflow-x: auto;
|
||||
scrollbar-width: none; position: relative;
|
||||
}
|
||||
.biochem-subnav::-webkit-scrollbar { display: none; }
|
||||
.biochem-subnav::after {
|
||||
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
|
||||
height: 1.5px; background: rgba(15,23,42,0.07);
|
||||
}
|
||||
.bsn-tab {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 11px 14px; border-radius: 9px; margin: 5px 1px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap;
|
||||
transition: background .15s, color .15s; position: relative;
|
||||
}
|
||||
.bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; }
|
||||
.bsn-active {
|
||||
background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700;
|
||||
}
|
||||
.bsn-active::after {
|
||||
content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px;
|
||||
height: 2.5px; border-radius: 99px; background: #9B5DE5;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.biochem-subnav { padding: 0 6px; }
|
||||
.bsn-tab { padding: 10px 10px; gap: 0; }
|
||||
.bsn-tab .bsn-label { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout" id="app">
|
||||
@@ -346,6 +383,9 @@
|
||||
<div class="notif-drop" id="notif-drop"></div>
|
||||
|
||||
<div class="sb-content">
|
||||
<nav class="biochem-subnav" aria-label="Разделы биохимии">
|
||||
<a class="bsn-tab" href="/biochem"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab" href="/biochem-library"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab" href="/biochem-reactions"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab" href="/biochem-properties"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab bsn-active" href="/biochem-pathways" aria-current="page"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
|
||||
</nav>
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><path d="M6 18h8"/><path d="M3 22h18"/><path d="M14 22a7 7 0 1 0 0-14h-1"/><path d="M9 14l2-7"/><path d="M12 14l2-7"/></svg></div>
|
||||
|
||||
@@ -192,7 +192,44 @@
|
||||
.props-sidebar { max-height: 40vh; }
|
||||
.mol-card-grid { grid-template-columns: 1fr !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Biochem subnav ─────────────────────────────────────────────── */
|
||||
.biochem-subnav {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
||||
flex-shrink: 0; overflow-x: auto;
|
||||
scrollbar-width: none; position: relative;
|
||||
}
|
||||
.biochem-subnav::-webkit-scrollbar { display: none; }
|
||||
.biochem-subnav::after {
|
||||
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
|
||||
height: 1.5px; background: rgba(15,23,42,0.07);
|
||||
}
|
||||
.bsn-tab {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 11px 14px; border-radius: 9px; margin: 5px 1px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap;
|
||||
transition: background .15s, color .15s; position: relative;
|
||||
}
|
||||
.bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; }
|
||||
.bsn-active {
|
||||
background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700;
|
||||
}
|
||||
.bsn-active::after {
|
||||
content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px;
|
||||
height: 2.5px; border-radius: 99px; background: #9B5DE5;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.biochem-subnav { padding: 0 6px; }
|
||||
.bsn-tab { padding: 10px 10px; gap: 0; }
|
||||
.bsn-tab .bsn-label { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout" id="app">
|
||||
@@ -200,6 +237,9 @@
|
||||
<div class="notif-drop" id="notif-drop"></div>
|
||||
|
||||
<div class="sb-content" style="overflow:hidden;display:flex;flex-direction:column">
|
||||
<nav class="biochem-subnav" aria-label="Разделы биохимии">
|
||||
<a class="bsn-tab" href="/biochem"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab" href="/biochem-library"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab" href="/biochem-reactions"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab bsn-active" href="/biochem-properties" aria-current="page"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab" href="/biochem-pathways"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
|
||||
</nav>
|
||||
<div class="props-layout">
|
||||
<!-- Left: molecule list -->
|
||||
<div class="props-sidebar">
|
||||
|
||||
@@ -316,7 +316,44 @@
|
||||
.page-header { padding: 10px; }
|
||||
.rxn-card { padding: 10px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Biochem subnav ─────────────────────────────────────────────── */
|
||||
.biochem-subnav {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
||||
flex-shrink: 0; overflow-x: auto;
|
||||
scrollbar-width: none; position: relative;
|
||||
}
|
||||
.biochem-subnav::-webkit-scrollbar { display: none; }
|
||||
.biochem-subnav::after {
|
||||
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
|
||||
height: 1.5px; background: rgba(15,23,42,0.07);
|
||||
}
|
||||
.bsn-tab {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 11px 14px; border-radius: 9px; margin: 5px 1px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap;
|
||||
transition: background .15s, color .15s; position: relative;
|
||||
}
|
||||
.bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; }
|
||||
.bsn-active {
|
||||
background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700;
|
||||
}
|
||||
.bsn-active::after {
|
||||
content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px;
|
||||
height: 2.5px; border-radius: 99px; background: #9B5DE5;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.biochem-subnav { padding: 0 6px; }
|
||||
.bsn-tab { padding: 10px 10px; gap: 0; }
|
||||
.bsn-tab .bsn-label { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout" id="app">
|
||||
@@ -324,6 +361,9 @@
|
||||
<div class="notif-drop" id="notif-drop"></div>
|
||||
|
||||
<div class="sb-content">
|
||||
<nav class="biochem-subnav" aria-label="Разделы биохимии">
|
||||
<a class="bsn-tab" href="/biochem"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab" href="/biochem-library"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab bsn-active" href="/biochem-reactions" aria-current="page"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab" href="/biochem-properties"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab" href="/biochem-pathways"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
|
||||
</nav>
|
||||
<!-- Header -->
|
||||
<div class="page-header">
|
||||
<div class="page-header-icon"><svg class="ic" viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
|
||||
|
||||
+41
-1
@@ -332,7 +332,44 @@
|
||||
.el-btn { width: 28px; height: 28px; font-size: 0.66rem; }
|
||||
.tool-btn { height: 26px; padding: 0 6px; font-size: 0.66rem; }
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ── Biochem subnav ─────────────────────────────────────────────── */
|
||||
.biochem-subnav {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 16px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1.5px solid rgba(15,23,42,0.07);
|
||||
flex-shrink: 0; overflow-x: auto;
|
||||
scrollbar-width: none; position: relative;
|
||||
}
|
||||
.biochem-subnav::-webkit-scrollbar { display: none; }
|
||||
.biochem-subnav::after {
|
||||
content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
|
||||
height: 1.5px; background: rgba(15,23,42,0.07);
|
||||
}
|
||||
.bsn-tab {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 11px 14px; border-radius: 9px; margin: 5px 1px;
|
||||
font-family: 'Manrope', sans-serif; font-size: 0.82rem; font-weight: 600;
|
||||
color: var(--text-3, #56687A); text-decoration: none; white-space: nowrap;
|
||||
transition: background .15s, color .15s; position: relative;
|
||||
}
|
||||
.bsn-tab svg { stroke: currentColor; width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.bsn-tab:hover { background: rgba(155,93,229,0.08); color: #9B5DE5; }
|
||||
.bsn-active {
|
||||
background: rgba(155,93,229,0.10); color: #7c3aed; font-weight: 700;
|
||||
}
|
||||
.bsn-active::after {
|
||||
content: ''; position: absolute; bottom: -5px; left: 14px; right: 14px;
|
||||
height: 2.5px; border-radius: 99px; background: #9B5DE5;
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.biochem-subnav { padding: 0 6px; }
|
||||
.bsn-tab { padding: 10px 10px; gap: 0; }
|
||||
.bsn-tab .bsn-label { display: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-layout" id="app">
|
||||
@@ -340,6 +377,9 @@
|
||||
<div class="notif-drop" id="notif-drop"></div>
|
||||
|
||||
<div class="sb-content">
|
||||
<nav class="biochem-subnav" aria-label="Разделы биохимии">
|
||||
<a class="bsn-tab bsn-active" href="/biochem" aria-current="page"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Редактор</span></a><a class="bsn-tab" href="/biochem-library"><svg viewBox="0 0 24 24"><path d="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"/></svg><span class="bsn-label">Библиотека</span></a><a class="bsn-tab" href="/biochem-reactions"><svg viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="bsn-label">Реакции</span></a><a class="bsn-tab" href="/biochem-properties"><svg viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2m6 10h2a5 5 0 0 0 0-10h-2m-6 5h6"/></svg><span class="bsn-label">Свойства</span></a><a class="bsn-tab" href="/biochem-pathways"><svg viewBox="0 0 24 24"><path d="M6 18h8M3 22h18M8 22V12l4-10 4 10v10M10 9h4"/></svg><span class="bsn-label">Пути</span></a>
|
||||
</nav>
|
||||
<!-- ── Toolbar ── -->
|
||||
<div class="bio-toolbar">
|
||||
<span class="bio-title">Биохимия</span>
|
||||
|
||||
@@ -1,81 +1,4 @@
|
||||
'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();
|
||||
})();
|
||||
/* biochem-nav.js — навигация теперь статична в HTML каждой страницы.
|
||||
* Файл сохранён для обратной совместимости (подключён на всех страницах).
|
||||
* Активная вкладка проставляется сервером через class="bsn-active" в HTML. */
|
||||
|
||||
Reference in New Issue
Block a user