feat: мультироль

frontend/src/components/layout/AppSidebar.vue

@@ -9,6 +9,7 @@ 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'] },
@@ -30,9 +31,32 @@ const navItems: NavItem[] = [
 ]
 
 const visible = computed(() =>
-  navItems.filter(n => auth.user && n.roles.includes(auth.user.role))
+  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 !== '/'
@@ -55,6 +79,16 @@ 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" />
         Выйти
@@ -110,7 +144,21 @@ 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; }
+.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;
+  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);