admin/WhatIDo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sidebar: color inactive nav icons by section meaning via data-nav attribute

Browse Source
This commit is contained in:
dev
2026-09-12 01:18:57 +03:00
parent 809b978c4b
commit 192de5e690
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+15
View File
@@ -13,6 +13,21 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
.sidebar nav a:hover{color:var(--text);background:var(--bg)}
.sidebar nav a.active{color:var(--accent);background:rgba(37,99,235,.06);border-left-color:var(--accent);font-weight:500}
.sidebar nav a i,.sidebar .bottom a i{width:16px;height:16px;flex-shrink:0}
.sidebar nav a[data-nav=dashboard] svg{color:#6366f1}
.sidebar nav a[data-nav=journal] svg{color:#0ea5e9}
.sidebar nav a[data-nav=students] svg{color:#14b8a6}
.sidebar nav a[data-nav=groups] svg{color:#8b5cf6}
.sidebar nav a[data-nav=files] svg{color:#f59e0b}
.sidebar nav a[data-nav=links] svg{color:#06b6d4}
.sidebar nav a[data-nav=trash] svg{color:#ef4444}
.sidebar nav a[data-nav=branches] svg{color:#10b981}
.sidebar nav a[data-nav=users] svg{color:#ec4899}
.sidebar nav a[data-nav=worker] svg{color:#a855f7}
.sidebar nav a[data-nav=audit] svg{color:#64748b}
.sidebar nav a[data-nav=bans] svg{color:#dc2626}
.sidebar nav a[data-nav=settings] svg{color:#475569}
.sidebar nav a.active svg{color:var(--accent)}
.sidebar .bottom a[data-nav=home] svg{color:#2563eb}
.sidebar .bottom{padding:12px 20px;border-top:1px solid var(--border)}
.sidebar .bottom a{display:flex;align-items:center;gap:10px;color:var(--muted);text-decoration:none;font-size:.8rem;padding:6px 0}
.sidebar .bottom a:hover{color:var(--text)}
public/admin.js
+2 -2
View File
@@ -73,10 +73,10 @@ function buildSidebar(active) {
<div class="user-role">${roleLabel}</div>
</div>
<nav>
${nav.map(n => `<a href="${n.page}.html" class="${n.page === active ? 'active' : ''}"><i data-lucide="${n.icon}"></i>${n.label}</a>`).join('')}
${nav.map(n => `<a href="${n.page}.html" data-nav="${n.page}" class="${n.page === active ? 'active' : ''}"><i data-lucide="${n.icon}"></i>${n.label}</a>`).join('')}
</nav>
<div class="bottom">
<a href="/"><i data-lucide="home"></i>На главную</a>
<a href="/" data-nav="home"><i data-lucide="home"></i>На главную</a>
<a class="logout" href="#" data-action="logout"><i data-lucide="log-out"></i>Выйти</a>
</div>`;
renderIcons();