design: улучшения дизайна

frontend/src/components/layout/AppTopbar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onBeforeUnmount, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useUserStore } from '@/stores/user'
@@ -7,17 +7,79 @@ import CoinChip from '@/components/ui/CoinChip.vue'
 import SearchInput from '@/components/ui/SearchInput.vue'
 import AppIcon from '@/components/ui/AppIcon.vue'
 import { formatUserName } from '@/utils/formatUserName'
+import type { UserRole } from '@/types'
 
 const auth = useAuthStore()
 const userStore = useUserStore()
 const router = useRouter()
 const searchQuery = ref('')
+const isProfileMenuOpen = ref(false)
+const profileMenuRef = ref<HTMLElement | null>(null)
 
 const unreadCount = computed(() => userStore.unreadCount())
+const roleLabels: Record<UserRole, string> = {
+  student: 'Студент',
+  teacher: 'Преподаватель',
+  admin: 'Администратор',
+}
+const roleTargets: Record<UserRole, string> = {
+  student: '/',
+  teacher: '/teacher',
+  admin: '/admin',
+}
+
+const roleButtons = computed(() => {
+  if (!auth.user) return []
+
+  return auth.user.roles
+    .filter(role => role !== auth.user?.activeRole)
+    .map(role => ({
+      role,
+      label: roleLabels[role],
+      to: roleTargets[role],
+    }))
+})
+
+function closeProfileMenu() {
+  isProfileMenuOpen.value = false
+}
+
+function toggleProfileMenu() {
+  isProfileMenuOpen.value = !isProfileMenuOpen.value
+}
 
 function openProfile() {
+  closeProfileMenu()
   router.push('/profile')
 }
+
+function switchToRole(role: UserRole, to: string) {
+  if (auth.setActiveRole(role)) {
+    closeProfileMenu()
+    router.push(to)
+  }
+}
+
+async function logout() {
+  closeProfileMenu()
+  await auth.logout()
+  router.push('/login')
+}
+
+function handleDocumentPointerDown(event: PointerEvent) {
+  if (!isProfileMenuOpen.value) return
+  const target = event.target
+  if (!(target instanceof Node)) return
+  if (!profileMenuRef.value?.contains(target)) closeProfileMenu()
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', handleDocumentPointerDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', handleDocumentPointerDown)
+})
 </script>
 
 <template>
@@ -40,16 +102,45 @@ function openProfile() {
         </span>
       </button>
 
-      <div
-        class="avatar"
-        role="button"
-        tabindex="0"
-        @click="openProfile"
-        @keydown.enter.prevent="openProfile"
-        @keydown.space.prevent="openProfile"
-      >
-        <AppIcon class="avatar-icon" icon="user" :size="18" />
-        <span class="avatar-name" v-if="auth.user">{{ formatUserName(auth.user.name) }}</span>
+      <div ref="profileMenuRef" class="profile-menu">
+        <button
+          class="avatar"
+          type="button"
+          :aria-expanded="isProfileMenuOpen"
+          aria-haspopup="menu"
+          @click="toggleProfileMenu"
+          @keydown.esc.prevent="closeProfileMenu"
+        >
+          <AppIcon class="avatar-icon" icon="user" :size="18" />
+          <span class="avatar-name" v-if="auth.user">{{ formatUserName(auth.user.name) }}</span>
+        </button>
+
+        <div v-if="isProfileMenuOpen" class="profile-dropdown" role="menu" @keydown.esc.prevent="closeProfileMenu">
+          <button class="profile-menu-item" type="button" role="menuitem" @click="openProfile">
+            <AppIcon icon="user" :size="16" />
+            Профиль
+          </button>
+
+          <div class="profile-menu-section" v-if="roleButtons.length">
+            <span class="profile-menu-caption">Сменить роль</span>
+            <button
+              v-for="item in roleButtons"
+              :key="item.role"
+              class="profile-menu-item"
+              type="button"
+              role="menuitem"
+              @click="switchToRole(item.role, item.to)"
+            >
+              <AppIcon :icon="item.role === 'admin' ? 'shield' : item.role === 'teacher' ? 'chart-bar' : 'home'" :size="16" />
+              {{ item.label }}
+            </button>
+          </div>
+
+          <button class="profile-menu-item danger" type="button" role="menuitem" @click="logout">
+            <AppIcon icon="logout" :size="16" />
+            Выйти
+          </button>
+        </div>
       </div>
     </div>
   </header>
@@ -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; }