<template>
    <div class="header">
        <div class="b1400">
            <div class="name">
                <p>테이큰소프트 <span>님</span></p>
            </div>
            <div class="login">
                <i class="fa-solid fa-user fa-lg" style="color: #ffffff;"></i>
                <router-link to="/Login.page"><button id="input">로그인</button></router-link>

            </div>

            <div class="join">
                <i class="fa-solid fa-user-plus fa-lg" style="color: #ffffff;"></i>
                <router-link to="/Join.page"><input type="button" value="회원가입" name="" id="input"></router-link>
            </div>
            <Menu class="menu" :isActive="isActive"></Menu>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Header mounted');
    }
}
</script>

<style scoped>
.name {
    padding: 0.5rem;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";

    color: white;
}

.b1400 {
    padding: 1rem;
    /* border: 1px solid red; */
}

.b1400 div {
    margin-right: 2rem;
}

.mypage button {
    font-size: 1.5rem !important;
    padding: 0.5rem;
}

.header {
    width: 100%;
    /* height: 40px; */
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
    float: right;
    background-color: #3f87f7;
    /* border: 1px solid red; */
}

#input {
    border: 0;
    background-color: rgba(240, 248, 255, 0);
    cursor: pointer;
    /* border: 1px solid red; */
    /* padding: 1rem; */
    color: white;
    font-size: 1.5rem;
}
</style>