From 6e40d3c594f7b6d09b4ba2078ebda19093b0b1f7 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 11:09:08 +0100
Subject: [PATCH] Enhance sidebar navigation icons with SVGs and update styling

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.
---
 frontend/src/App.jsx    | 24 +++++++++++++---
 frontend/src/styles.css | 63 ++++++++++++++++++++++++++++-------------
 2 files changed, 63 insertions(+), 24 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index bce6bd1..b6ea61c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -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>
           )}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 6f2c718..5a5210d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -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 {