53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<template>
|
|
<header>
|
|
<nav>
|
|
<router-link to="/">Главная</router-link> |
|
|
|
|
<template v-if="!authStore.isAuthenticated">
|
|
<router-link to="/login">Вход</router-link> |
|
|
<router-link to="/register">Регистрация</router-link>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<router-link to="/account">Личный кабинет</router-link>
|
|
<span>Привет, {{ authStore.user?.username }}!</span> |
|
|
<a @click="authStore.handleLogout" href="#">Выход</a>
|
|
</template>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<router-view />
|
|
</main>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAuthStore } from "@/stores/auth";
|
|
const authStore = useAuthStore();
|
|
</script>
|
|
|
|
<style scoped>
|
|
header {
|
|
background-color: #f0f0f0;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
nav a {
|
|
margin: 0 1rem;
|
|
text-decoration: none;
|
|
color: #2c3e50;
|
|
}
|
|
nav a.router-link-exact-active {
|
|
font-weight: bold;
|
|
color: #42b983;
|
|
}
|
|
main {
|
|
padding: 1rem;
|
|
}
|
|
span {
|
|
margin: 0 1rem;
|
|
}
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|