---
import { Image } from "astro:assets";
import AtlassiaLogo from "../assets/atlassia_logo.svg";
---

<header>
    <div id="logo">
        <a href="/"
            ><Image
                src={AtlassiaLogo}
                alt="Atlassia"
                height={40}
                loading="eager"
            /></a
        >
    </div>

    <nav class="navSection">
        <a href="/">Home</a>
        <a href="/discover">Discover</a>
        <a href="/contribute">Contribute</a>
    </nav>

    <div id="account" class="navSection">
        <a class="primaryButton" href="/login">Sign In</a>
    </div>
</header>

<style>
    .primaryButton {
        background-color: #073b4c;
        color: white !important;

        &:hover {
            background-color: hsl(195, 83%, 30%) !important;
        }
    }
    .navSection {
        a {
            padding: 10px;
            border-radius: 10px;

            color: #073b4c;
            text-decoration: none;
            font-weight: 500;
            font-size: 20px;

            &:hover {
                background-color: #e5e5e5;
            }
        }
    }
    header {
        position: sticky

        &:sticky {
            border-bottom: 1px solid black;
        }

        margin: 6px 0 0 0;
        gap: 5px;

        display: flex;
        justify-content: left;
        align-items: center;

        min-height: 60px;

        #logo {
            display: flex;
            align-items: center;
            flex-grow: 1;
            height: 45px;
            a {
                line-height: 0%;
            }
        }

        nav {
            display: flex;
            justify-content: right;
            align-items: center;

            gap: 5px;
        }

        #account {
            display: flex;
            justify-content: right;
            align-items: center;
        }
    }

    @media only screen and (max-width: 630px) {
        header {
            flex-direction: column;
            justify-content: center;
        }
    }
</style>