<template>
    <header>
        <img id="header-logo"
            loading="lazy" src="../tüit-logo.svg.png" />
        <div class="profile">
            <div class="username">username</div>
            <div class="picture">
                <img id="picture"
                    loading="lazy" src="" />
            </div>
        </div>
    </header>
</template>


<script>

export default {
    name: "PageHeader",
}

</script>


<style scoped>

    * {
        box-sizing: border-box;
    }

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        background-color: #2c2c2c;
        height: 60px;
        padding: 10px 20px;
    }
    
    #header-logo {
        object-fit: contain;
        object-position: center;
        width: 80px;
        height: 40px;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .profile {
        align-items: flex-end;
        display: flex;
        gap: 10px;
        padding: 0 30px;
    }
    .username {
        color: #fff;
        text-align: right;
        letter-spacing: 0.8px;
        align-self: center;
        margin: auto 0;
        font: 200 14px Overpass, sans-serif;
    }
    .picture {
        display: flex;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: #fff;
    }

</style>