diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
index 2469274..8cc1a81 100644
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -1,15 +1,13 @@
@@ -40,16 +102,45 @@ function openProfile() {
-
-
-
{{ formatUserName(auth.user.name) }}
+
@@ -123,6 +214,9 @@ function openProfile() {
align-items: center;
justify-content: center;
}
+.profile-menu {
+ position: relative;
+}
.avatar {
display: flex;
align-items: center;
@@ -132,11 +226,82 @@ function openProfile() {
border-radius: 20px;
border: 1px solid var(--color-border-glass);
background: rgba(255,255,255,0.5);
+ color: var(--color-text);
+ font: inherit;
transition: all 0.2s;
}
-.avatar:hover { background: rgba(255,255,255,0.8); }
+.avatar:hover,
+.avatar[aria-expanded="true"] {
+ border-color: rgba(34,197,94,0.5);
+ background: rgba(255,255,255,0.8);
+ box-shadow: 0 0 0 3px rgba(34,197,94,0.12);
+}
+.avatar:focus-visible,
+.profile-menu-item:focus-visible {
+ outline: 2px solid rgba(34,197,94,0.45);
+ outline-offset: 2px;
+}
.avatar-icon { color: var(--color-text-secondary); }
.avatar-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
+.profile-dropdown {
+ position: absolute;
+ top: calc(100% + 10px);
+ right: 0;
+ min-width: 220px;
+ padding: 8px;
+ border: 1px solid var(--color-border-glass);
+ border-radius: var(--radius-sm);
+ background: rgba(255,255,255,0.96);
+ box-shadow: 0 18px 38px rgba(15,23,42,0.14);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ z-index: 120;
+}
+.profile-menu-section {
+ border-top: 1px solid rgba(15,23,42,0.08);
+ border-bottom: 1px solid rgba(15,23,42,0.08);
+ margin: 4px 0;
+ padding: 6px 0;
+}
+.profile-menu-caption {
+ display: block;
+ padding: 3px 10px 5px;
+ color: var(--color-text-secondary);
+ font-size: 11px;
+ font-weight: 700;
+ text-transform: uppercase;
+}
+.profile-menu-item {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 9px 10px;
+ border: 0;
+ border-radius: var(--radius-sm);
+ background: transparent;
+ color: var(--color-text);
+ cursor: pointer;
+ font: inherit;
+ font-size: 13px;
+ font-weight: 600;
+ text-align: left;
+ transition: background 0.2s, color 0.2s;
+}
+.profile-menu-item:hover {
+ background: rgba(34,197,94,0.1);
+ color: var(--color-primary-dark);
+}
+.profile-menu-item.danger {
+ color: #991B1B;
+}
+.profile-menu-item.danger:hover {
+ background: rgba(239,68,68,0.1);
+ color: #991B1B;
+}
@media (max-width: 640px) {
.topbar-center { display: none; }
diff --git a/frontend/src/views/student/ProfileView.vue b/frontend/src/views/student/ProfileView.vue
index be305f8..ef329c7 100644
--- a/frontend/src/views/student/ProfileView.vue
+++ b/frontend/src/views/student/ProfileView.vue
@@ -49,7 +49,7 @@ onMounted(() => {