refactor: replace sidebar user footer with topbar dropdown menu

public/assets/css/style.css

@@ -301,10 +301,7 @@ code, pre {
 .sidebar.collapsed .nav-chevron,
 .sidebar.collapsed .notification-badge,
 .sidebar.collapsed .nav-divider,
-.sidebar.collapsed .nav-section,
-.sidebar.collapsed .user-details,
-.sidebar.collapsed .user-menu,
-.sidebar.collapsed .sidebar-footer {
+.sidebar.collapsed .nav-section {
     display: none;
 }
 
@@ -317,10 +314,6 @@ code, pre {
     padding: 0.65rem;
 }
 
-.sidebar.collapsed .user-info {
-    justify-content: center;
-}
-
 /* ==========================================================================
    Main Content
    ========================================================================== */
@@ -374,6 +367,39 @@ code, pre {
     font-size: 0.88rem;
     color: var(--text-secondary);
     white-space: nowrap;
+    cursor: pointer;
+    background: none;
+    border: none;
+    font-family: inherit;
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--radius-sm);
+    transition: background var(--transition);
+}
+
+.topbar-user:hover {
+    background: var(--bg-hover);
+}
+
+.topbar-user-dropdown {
+    position: relative;
+}
+
+.dropdown-menu-right {
+    right: 0;
+    left: auto;
+}
+
+.dropdown-header {
+    padding: 0.55rem 1rem;
+    font-size: 0.88rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.dropdown-header small {
+    font-size: 0.72rem;
+    color: var(--text-muted);
 }
 
 .btn-icon {
@@ -1056,7 +1082,8 @@ textarea.form-input {
     box-shadow: var(--shadow-lg);
 }
 
-.dropdown.active .dropdown-menu {
+.dropdown.active .dropdown-menu,
+.dropdown-menu.open {
     display: block;
 }
 
@@ -2302,10 +2329,7 @@ textarea.form-input {
     .sidebar.mobile-open.collapsed .nav-chevron,
     .sidebar.mobile-open.collapsed .notification-badge,
     .sidebar.mobile-open.collapsed .nav-divider,
-    .sidebar.mobile-open.collapsed .nav-section,
-    .sidebar.mobile-open.collapsed .user-details,
-    .sidebar.mobile-open.collapsed .user-menu,
-    .sidebar.mobile-open.collapsed .sidebar-footer {
+    .sidebar.mobile-open.collapsed .nav-section {
         display: flex;
     }
 
@@ -2318,10 +2342,6 @@ textarea.form-input {
         padding: 0.65rem 1.25rem;
     }
 
-    .sidebar.mobile-open.collapsed .user-info {
-        justify-content: flex-start;
-    }
-
     .main-area {
         margin-left: 0 !important;
     }