From 5cc19b8c3ecb5836e7db36f013d61e60e8bb645f Mon Sep 17 00:00:00 2001
From: shats <admin@shts.su>
Date: Mon, 16 Feb 2026 15:21:46 +0700
Subject: [PATCH] refactor(App): enhance vertical sidebar navigation with icon
 integration and improved dropdown item styling for better user experience

---
 frontend/src/App.css | 14 +++++++++++++-
 frontend/src/App.jsx |  5 ++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index c9391ba..8976aed 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -35,10 +35,22 @@
   margin: 0;
 }
 .navbar-vertical .nav-item.dropdown .dropdown-item {
-  padding-left: calc(0.5rem + 1.25rem + 0.5rem);
+  padding-left: 1rem;
   padding-top: 0.35rem;
   padding-bottom: 0.35rem;
 }
+.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.navbar-vertical .nav-item.dropdown .dropdown-item .nav-link-icon .icon {
+  width: 1rem;
+  height: 1rem;
+}
 
 /* Custom avatar background */
 .avatar {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e35af57..f03130c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -296,8 +296,11 @@ function MainLayout() {
                           <Link
                             key={item.id}
                             to={item.path}
-                            className={`dropdown-item${activeTab === item.id ? ' active' : ''}`}
+                            className={`dropdown-item d-flex align-items-center${activeTab === item.id ? ' active' : ''}`}
                           >
+                            <span className="nav-link-icon me-2">
+                              <item.icon className="icon" />
+                            </span>
                             {item.title}
                           </Link>
                         ))}