FEAT: Add loged header

[Caussz]

Modify Header to Indicate User Login Status

Description:

This task involves modifying the header to indicate when a user is logged in by replacing the "Login" button. The implementation should follow the pre-established design in Figma and be created as a component with v-if logic to conditionally render the appropriate button.

Checklist:

• Follow the design specified in the Figma mockup for the logged-in state.
• Create a component that includes the logic to display either the "Login" button or the user status based on the login state.
• Implement v-if logic to conditionally render the login state in the header.
• Ensure that the component integrates seamlessly with the existing header component.

Example:

<template>
    <div class="header-desktop">
        <TextLogo />
        <ul class="routers-desktop">
            <ListTitles class="router-link" v-for="(text, index) in templateStore.titles" :key="index" :title="text.text" :link="text.link" />
        </ul>
        <LoginButton v-if=''i!sLogged />
        <userBasicInfo v-else>
    </div>
</template>

Notes:

• Ensure the implementation is consistent with the overall design and functionality of the application.
• Validate the implementation with the team leader before finalizing.
• Please check off each item on the checklist as you complete the tasks.

[Caussz]

At first I'm going to help you kill this task and show you some interesting ways to implement state management, this task goes quickly