init

frontend/src/components/common/Header.vue

@@ -0,0 +1,78 @@
+<template>
+  <header class="header">
+    <div class="header-content">
+      <router-link to="/" class="logo">EnigFM</router-link>
+      <nav class="nav">
+        <template v-if="authStore.isAuthenticated">
+          <router-link to="/">Комнаты</router-link>
+          <router-link to="/tracks">Треки</router-link>
+          <span class="username">{{ authStore.user?.username }}</span>
+          <button class="btn-secondary" @click="logout">Выйти</button>
+        </template>
+        <template v-else>
+          <router-link to="/login">Войти</router-link>
+          <router-link to="/register">Регистрация</router-link>
+        </template>
+      </nav>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../../stores/auth'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+function logout() {
+  authStore.logout()
+  router.push('/login')
+}
+</script>
+
+<style scoped>
+.header {
+  background: #16162a;
+  border-bottom: 1px solid #2d2d44;
+  padding: 0 20px;
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60px;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+  color: #6c63ff;
+}
+
+.logo:hover {
+  text-decoration: none;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.nav a {
+  color: #aaa;
+}
+
+.nav a:hover, .nav a.router-link-active {
+  color: #fff;
+  text-decoration: none;
+}
+
+.username {
+  color: #6c63ff;
+}
+</style>