refactor(App): enhance vertical sidebar navigation with icon integration and improved dropdown item styling for better user experience

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 {

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>
                         ))}