feat: подготовил дизайн (изменения из другого репозитория)

frontend/src/components/layout/AppSidebar.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const router = useRouter()
+const route = useRoute()
+
+interface NavItem { label: string; icon: string; to: string; roles: string[] }
+
+const navItems: NavItem[] = [
+  { label: 'Главная',     icon: '🏠', to: '/',                roles: ['student'] },
+  { label: 'Каталог',     icon: '📚', to: '/catalog',         roles: ['student'] },
+  { label: 'Мои лекции',  icon: '📋', to: '/my-lectures',     roles: ['student'] },
+  { label: 'Достижения',  icon: '🏆', to: '/achievements',    roles: ['student'] },
+  { label: 'Уведомления', icon: '🔔', to: '/notifications',   roles: ['student'] },
+  { label: 'Профиль',     icon: '👤', to: '/profile',         roles: ['student'] },
+  // Teacher
+  { label: 'Дашборд',     icon: '📊', to: '/teacher',         roles: ['teacher'] },
+  { label: 'Лекции',      icon: '📖', to: '/teacher/lectures',roles: ['teacher'] },
+  { label: 'Аналитика',   icon: '📈', to: '/teacher/analytics',roles: ['teacher'] },
+  { label: 'Профиль',     icon: '👤', to: '/profile',         roles: ['teacher'] },
+  // Admin
+  { label: 'Дашборд',     icon: '🛡️', to: '/admin',           roles: ['admin'] },
+  { label: 'Пользователи',icon: '👥', to: '/admin/users',     roles: ['admin'] },
+  { label: 'Лекции',      icon: '📚', to: '/admin/lectures',  roles: ['admin'] },
+  { label: 'ИИ очередь',  icon: '🤖', to: '/admin/llm-queue', roles: ['admin'] },
+]
+
+const visible = computed(() =>
+  navItems.filter(n => auth.user && n.roles.includes(auth.user.role))
+)
+
+function isActive(to: string) {
+  if (to === '/') return route.path === '/'
+  return route.path.startsWith(to) && to !== '/'
+}
+</script>
+
+<template>
+  <aside class="sidebar">
+    <nav class="sidebar-nav">
+      <RouterLink
+        v-for="item in visible"
+        :key="item.to + item.label"
+        :to="item.to"
+        class="nav-item"
+        :class="{ active: isActive(item.to) }"
+      >
+        <span class="nav-icon">{{ item.icon }}</span>
+        <span class="nav-label">{{ item.label }}</span>
+      </RouterLink>
+    </nav>
+
+    <div class="sidebar-footer">
+      <button class="logout-btn" @click="auth.logout(); router.push('/login')">
+        🚪 Выйти
+      </button>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.sidebar {
+  position: fixed;
+  top: var(--topbar-height);
+  left: 0;
+  bottom: 0;
+  width: var(--sidebar-width);
+  background: rgba(255,255,255,0.75);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-right: 1px solid var(--color-border-glass);
+  display: flex;
+  flex-direction: column;
+  z-index: 90;
+  padding: 16px 0;
+}
+.sidebar-nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px;
+  overflow-y: auto;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+.nav-item:hover {
+  background: rgba(34,197,94,0.1);
+  color: var(--color-primary-dark);
+}
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(134,239,172,0.12));
+  color: var(--color-primary-dark);
+  font-weight: 700;
+  box-shadow: 0 2px 8px rgba(34,197,94,0.12);
+}
+.nav-icon { font-size: 17px; flex-shrink: 0; }
+.sidebar-footer { padding: 10px 18px 8px; }
+.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-btn:hover { background: rgba(239,68,68,0.15); }
+
+@media (max-width: 768px) { .sidebar { display: none; } }
+</style>