From 882ad2dca8c24d23454847efb22e7c522f2e5df2 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 14:51:43 +0100
Subject: [PATCH] Add custom styles and spacer for Admin nav button

Introduced a spacer above the admin navigation link to enhance sidebar organization. Updated the styles for the admin navigation button, including hover and active states, to improve clarity and visual feedback when interacting with the button.
---
 frontend/src/App.jsx    | 19 +++++++++++--------
 frontend/src/styles.css | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3f9390b..1b730b9 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -62,14 +62,17 @@ function Layout({ children }) {
             <span className="nav-label">Alerts</span>
           </NavLink>
           {me?.role === "admin" && (
-            <NavLink to="/admin/users" className={navClass}>
-              <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>
+            <>
+              <div className="sidebar-nav-spacer" aria-hidden="true" />
+              <NavLink to="/admin/users" className={({ isActive }) => `nav-btn admin-nav${isActive ? " active" : ""}`}>
+                <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>
+            </>
           )}
         </nav>
         <div className="profile">
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9c8d07f..f523cfc 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -69,6 +69,13 @@ a {
   gap: 9px;
 }
 
+.sidebar-nav-spacer {
+  height: 12px;
+  margin: 2px 0 4px;
+  border-top: 1px solid #23406a;
+  opacity: 0.9;
+}
+
 .nav-btn {
   position: relative;
   display: flex;
@@ -107,6 +114,33 @@ a {
   background: linear-gradient(180deg, #74e8ff, #25bdf3);
 }
 
+.nav-btn.admin-nav {
+  border-color: #5b4da1;
+  background: linear-gradient(180deg, #1c2a58, #18224a);
+  color: #d8d5ff;
+}
+
+.nav-btn.admin-nav .nav-icon {
+  border-color: #7060c2;
+  background: linear-gradient(180deg, #2a2e66, #212854);
+}
+
+.nav-btn.admin-nav:hover {
+  border-color: #8b7ce0;
+  background: linear-gradient(180deg, #24316a, #1f2a5a);
+}
+
+.nav-btn.admin-nav.active {
+  border-color: #b9a7ff;
+  box-shadow: inset 0 0 0 1px #b9a7ff69, 0 8px 20px #1a143a8a;
+  background: linear-gradient(180deg, #332d73, #27235f);
+  color: #f4eeff;
+}
+
+.nav-btn.admin-nav.active::before {
+  background: linear-gradient(180deg, #ddd2ff, #b9a7ff);
+}
+
 .nav-icon {
   width: 28px;
   height: 28px;