From a42a305a128098618f58cddad5443b384e2cf089 Mon Sep 17 00:00:00 2001
From: Sergey Karmanov <ppoocpel8888@gmail.com>
Date: Thu, 14 May 2026 02:16:18 +0300
Subject: [PATCH] =?UTF-8?q?design:=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/AppSidebar.vue |  78 +-------
 frontend/src/components/layout/AppTopbar.vue  | 189 ++++++++++++++++--
 frontend/src/views/student/ProfileView.vue    |   2 +-
 3 files changed, 187 insertions(+), 82 deletions(-)

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 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import AppIcon from '@/components/ui/AppIcon.vue'
 
 const auth = useAuthStore()
-const router = useRouter()
 const route = useRoute()
 
 interface NavItem { label: string; icon: string; to: string; roles: string[] }
-type AppRole = 'student' | 'teacher' | 'admin'
 
 const navItems: NavItem[] = [
   { label: 'Главная', icon: 'home', to: '/', roles: ['student'] },
@@ -34,29 +32,6 @@ const visible = computed(() =>
   navItems.filter(n => auth.user && n.roles.includes(auth.user.activeRole))
 )
 
-const roleButtons = computed(() => {
-  if (!auth.user) return []
-  const labels: Record<AppRole, string> = {
-    student: 'Студент',
-    teacher: 'Преподаватель',
-    admin: 'Администратор',
-  }
-  const targets: Record<AppRole, string> = {
-    student: '/',
-    teacher: '/teacher',
-    admin: '/admin',
-  }
-  return auth.user.roles
-    .filter(role => role !== auth.user?.activeRole)
-    .map(role => ({ role, label: labels[role], to: targets[role] }))
-})
-
-function switchToRole(role: AppRole, to: string) {
-  if (auth.setActiveRole(role)) {
-    router.push(to)
-  }
-}
-
 function isActive(to: string) {
   if (to === '/') return route.path === '/'
   return route.path.startsWith(to) && to !== '/'
@@ -79,20 +54,7 @@ function isActive(to: string) {
     </nav>
 
     <div class="sidebar-footer">
-      <div class="role-switches" v-if="roleButtons.length">
-        <button
-          v-for="item in roleButtons"
-          :key="item.role"
-          class="role-switch-btn"
-          @click="switchToRole(item.role, item.to)"
-        >
-          Перейти: {{ item.label }}
-        </button>
-      </div>
-      <button class="logout-btn" @click="auth.logout().then(() => router.push('/login'))">
-        <AppIcon class="logout-icon" icon="logout" :size="16" />
-        Выйти
-      </button>
+      <span class="copyright">© 2026 UniVerse</span>
     </div>
   </aside>
 </template>
@@ -144,38 +106,16 @@ function isActive(to: string) {
   box-shadow: 0 2px 8px rgba(34,197,94,0.12);
 }
 .nav-icon { flex-shrink: 0; color: currentColor; }
-.sidebar-footer { padding: 10px 18px 8px; display: flex; flex-direction: column; gap: 8px; }
-.role-switches { display: flex; flex-direction: column; gap: 6px; }
-.role-switch-btn {
-  width: 100%;
-  background: rgba(34,197,94,0.08);
-  border: 1px solid rgba(34,197,94,0.2);
-  border-radius: var(--radius-sm);
-  padding: 8px 10px;
+.sidebar-footer {
+  padding: 10px 18px 8px;
+  display: flex;
+  justify-content: center;
+}
+.copyright {
+  color: var(--color-text-secondary);
   font-size: 12px;
   font-weight: 600;
-  color: var(--color-primary-dark);
-  cursor: pointer;
-  transition: all 0.2s;
 }
-.role-switch-btn:hover { background: rgba(34,197,94,0.15); }
-.logout-btn {
-  width: 100%;
-  background: rgba(239,68,68,0.08);
-  border: 1px solid rgba(239,68,68,0.2);
-  border-radius: var(--radius-sm);
-  padding: 9px 12px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #991B1B;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.logout-icon { color: currentColor; }
-.logout-btn:hover { background: rgba(239,68,68,0.15); }
 
 @media (max-width: 768px) { .sidebar { display: none; } }
 </style>
diff --git a/frontend/src/components/layout/AppTopbar.vue b/frontend/src/components/layout/AppTopbar.vue
index 9e3105b..606536d 100644
--- a/frontend/src/components/layout/AppTopbar.vue
+++ b/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; }
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(() => {
 <template>
   <div class="profile page-content">
     <div class="header">
-      <h1 class="page-title">Профиль студента</h1>
+      <h1 class="page-title">Профиль пользователя</h1>
       <CoinChip :amount="user.coins" />
     </div>