<template>
    <nav class="site-nav">
        <ul class="nav-items">
            <li class="nav-item">
                <router-link :to="{ name: 'snippet-index' }">
                    Snippets
                </router-link>
            </li>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
@import "@/style/variables";

.site-nav {
    flex-grow: 1;
    max-width: 250px;

    .nav-items {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;

        .nav-item {
            text-align: center;

            a {
                text-decoration: none;
                font-size: 1.1rem;
                color: $text-color;

                &:hover {
                    color: darken($text-color, 15%);
                }
            }
        }
    }
}

@media (max-width: $md) {
    .site-nav {
        flex-grow: unset;
        max-width: unset;

        .nav-items {
            justify-content: unset;

            .nav-item {
                flex-basis: 100%;
            }
        }
    }
}
</style>
