domBudg/front/src/components/main/Header.vue

<script setup lang="ts">
import { inject } from 'vue';
import { useUserStore } from '../../store';
import { AuthService } from '../../core/services/auth-service';
import router from '../../router';
import { HomeOutlined, BlockOutlined } from '@ant-design/icons-vue';

const store = useUserStore();
const authService = inject(AuthService.name) as AuthService;

function logout() {
    authService.logout();
    router.push({ name: 'login' });
}

</script>

<template>
    <a-layout-header class="header">
        <div class="base-nav">
            <div>ДомБюдж</div>
            <nav>
                <RouterLink :to="{ name: 'home' }"><HomeOutlined /> Главная</RouterLink>
                <RouterLink :to="{ name: 'groups' }"><BlockOutlined /> Группы расходов</RouterLink>
            </nav>
        </div>
        <div v-if="!store.user.id">
            <RouterLink :to="{ name: 'login' }">Войти</RouterLink>
        </div>
        <div v-else>
            <label for="logout">Привет, {{ store.user.name }}! Ваш текущий баланс: {{ store.user.balance }}</label>
            <a-button 
                name="logout" 
                @click="logout()" 
                danger
                style="margin-left: 30px"
            >
                Выйти
            </a-button>
        </div>
    </a-layout-header>
</template>

<style scoped>
.header {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.base-nav {
    display: inline-flex;
    justify-content: left;
}
.base-nav a {
    margin-left: 30px;
}

</style>