addded change profile

src/styles/sidebar.css

@@ -93,6 +93,47 @@
   box-shadow: 0 0 12px rgba(45,224,200,.3); /* мягкое свечение */
 }
 
+/* ── Profile Component ── */
+.f-profile {
+  display: flex; align-items: center; gap: 12px;
+  padding: 10px 14px; border-radius: 12px;
+  cursor: pointer; transition: background .15s;
+  border: 1px solid transparent;
+}
+.f-profile:hover {
+  background: rgba(45, 224, 200, .08);
+  border-color: rgba(45, 224, 200, .25);
+}
+
+.f-profile-avatar {
+  width: 40px; height: 40px;
+  border-radius: 50%; object-fit: cover;
+  flex-shrink: 0; border: 2px solid var(--teal);
+}
+.f-profile-avatar-placeholder {
+  width: 40px; height: 40px;
+  border-radius: 50%; flex-shrink: 0;
+  background: rgba(45, 224, 200, .15);
+  border: 2px solid rgba(45, 224, 200, .3);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.3rem;
+}
+
+.f-profile-info { flex: 1; min-width: 0; }
+.f-profile-name {
+  color: #fff; font-weight: 700; font-size: .85rem;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.f-profile-email {
+  color: var(--muted); font-size: .7rem;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.f-sb-divider {
+  height: 1px; background: rgba(255, 255, 255, .08);
+  margin: 8px 0;
+}
+
 @media (max-width: 900px) {
   .f-right {
     display: none;