<script>
    export let title = "title";
</script>

<div class="headerBar">
    <a href="/">
        <img src="/images/logo/wide_logo.svg" alt="OwlBoard Logo" />
    </a>
    <header>{title}</header>
</div>
<div class="headerBlock">
    <!-- This exists to prevent the headerBar overlapping anything below it -->
</div>

<style>
    .headerBar {
        background: var(--island-bg-solid);
        color: var(--main-header-color);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        height: 50px;
        z-index: 20;
        box-shadow: 0 3px 30px var(--box-shadow-color);
    }

    img {
        position: absolute;
        height: 40px;
        right: 8px;
        top: 5px;
    }

    header {
        position: absolute;
        left: 0px;
        top: 3px;
        font-family: urwgothic, sans-serif;
        font-weight: 600;
        margin-top: 7px;
        margin-left: 20px;
        font-size: 15pt;
    }

    .headerBlock {
        height: 50px;
        margin: 0;
        padding: 0;
    }
</style>
