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

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 {