<script setup lang="ts">
import { RouterLink } from "vue-router";
</script>

<template>
    <header>
        <nav class="main-nav-bar">
            <RouterLink to="/">Etusivu</RouterLink>
            <RouterLink to="/program">Ohjelma</RouterLink>
            <RouterLink to="/performers">Esiintyjät</RouterLink>
            <RouterLink to="/info">Info</RouterLink>
            <RouterLink to="/safety">Turvallisuus</RouterLink>
            <RouterLink to="/archive">Arkisto</RouterLink>
        </nav>
        <h1 class="mobile-main-title">
            <RouterLink to="/">Runosaari 2022</RouterLink>
        </h1>
        <nav class="mobile-main-nav-bar" id="nav-bar">
            <RouterLink to="/#logo-start">Etusivu</RouterLink>
            <RouterLink to="/program#program-start">Ohjelma</RouterLink>
            <RouterLink to="/performers#performers-start">Esiintyjät</RouterLink>
            <RouterLink to="/info#contact-start">Info</RouterLink>
            <RouterLink to="/safety#safety-start">Turvallisuus</RouterLink>
            <RouterLink to="/archive#archive-start">Arkisto</RouterLink>
        </nav>
    </header>
</template>

<style lang="scss">
header {
    display: flex;
    flex-direction: column;
    align-items: center;

    nav {
        display: flex;
        justify-content: center;

        a {
            padding: 15px;
            color: #2f273e;
            text-decoration: none;
        }

        a:hover {
            background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
            text-decoration: underline;
        }

        @media screen and (max-width: 600px) {
            a {
                width: 100%;
                padding: 0px;
                text-align: center;
                text-decoration: underline;
                font-size: 1.5rem;
                margin-bottom: 4px;
            }
        }

        &.mobile-main-nav-bar {
            visibility: hidden;
            height: 0px;
        }

        @media screen and (max-width: 600px) {
            &.mobile-main-nav-bar {
                height: auto;
                display: flex;
                visibility: visible;
                flex-direction: column;
                align-items: center;
                background-color: #d5caf2;
                width: 80%;
                margin-bottom: 30px;
            }

            &.main-nav-bar {
                visibility: hidden;
                height: 0px;
            }
        }
    }

    .mobile-main-title {
        visibility: hidden;
        height: 0px;
        margin: 0px;
    }

    @media screen and (max-width: 600px) {
        .mobile-main-title {
            visibility: visible !important;
            height: 100% !important;
            margin-top: 30px !important;
            margin-bottom: 30px !important;
            text-align: center;
        }
    }
}
</style>