79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<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>
|