nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Enhance sidebar navigation icons with SVGs and update styling

Browse Source 
Replaced text-based icons with accessible SVG icons for better visual appeal and improved semantics. Adjusted styles for sidebar buttons and icons, including dimensions, colors, and hover effects, to align with the updated design language. Added subtle animations and gradients for a more modern and polished user experience.
This commit is contained in:
Sascha Nesterovic
2026-02-12 11:09:08 +01:00
parent 8c94a30a81
commit 6e40d3c594
2 changed files with 63 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/App.jsx
View File

@@ -25,20 +25,36 @@ function Layout({ children }) {
<h1>NexaPG</h1>
<nav className="sidebar-nav">
<NavLink to="/" end className={navClass}>
<span className="nav-icon">DB</span>
<span className="nav-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zm0 6c0 1.7 3.6 3 8 3s8-1.3 8-3M4 18c0 1.7 3.6 3 8 3s8-1.3 8-3" />
</svg>
</span>
<span className="nav-label">Dashboard</span>
</NavLink>
<NavLink to="/targets" className={navClass}>
<span className="nav-icon">TG</span>
<span className="nav-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3zM12 12l8-4.5M12 12L4 7.5M12 12v9" />
</svg>
</span>
<span className="nav-label">Targets</span>
</NavLink>
<NavLink to="/query-insights" className={navClass}>
<span className="nav-icon">QI</span>
<span className="nav-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M4 19h16M7 15l3-3 3 2 4-5M18 8h.01" />
</svg>
</span>
<span className="nav-label">Query Insights</span>
</NavLink>
{me?.role === "admin" && (
<NavLink to="/admin/users" className={navClass}>
<span className="nav-icon">AD</span>
<span className="nav-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8a7 7 0 0 1 14 0" />
</svg>
</span>
<span className="nav-label">Admin</span>
</NavLink>
)}

63
frontend/src/styles.css
View File

@@ -48,55 +48,78 @@ a {
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 10px;
gap: 9px;
}
.nav-btn {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid #223056;
border-radius: 10px;
background: linear-gradient(180deg, #101b3a, #0d1530);
color: #c6d5ef;
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
gap: 12px;
padding: 11px 13px;
border: 1px solid #253962;
border-radius: 12px;
background: linear-gradient(180deg, #101a36, #0d1630);
color: #cedbf2;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.nav-btn:hover {
border-color: #2e4f98;
background: linear-gradient(180deg, #13224b, #101b3a);
border-color: #355ca6;
background: linear-gradient(180deg, #122449, #0f1e3f);
transform: translateY(-1px);
box-shadow: 0 6px 18px #07122c66;
}
.nav-btn.active {
border-color: #38bdf8;
box-shadow: inset 0 0 0 1px #38bdf860;
background: linear-gradient(180deg, #16305f, #101f43);
box-shadow: inset 0 0 0 1px #38bdf84f, 0 8px 20px #0a1c4260;
background: linear-gradient(180deg, #173a6e, #112851);
color: #ecf5ff;
}
.nav-btn.active::before {
content: "";
position: absolute;
left: -1px;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, #7dd3fc, #38bdf8);
}
.nav-icon {
width: 26px;
height: 26px;
width: 28px;
height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
border: 1px solid #2b3f74;
background: #0d1631;
border: 1px solid #324f8a;
background: linear-gradient(180deg, #0f1e40, #0d1a37);
}
.nav-icon svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-label {
font-size: 15px;
font-weight: 600;
font-weight: 650;
letter-spacing: 0.01em;
}
.profile {
margin-top: auto;
border-top: 1px solid #223056;
padding-top: 16px;
padding-top: 14px;
color: #d7e4fa;
}
.role {