traxxx/assets/components/header/header.vue

<template>
    <header class="header">
        <div>
            <router-link
                to="/home"
                class="logo-link"
            ><h1 class="logo"><Icon icon="logo" /></h1></router-link>

            <nav class="nav">
                <ul class="nolist">
                    <li class="nav-item">
                        <router-link
                            v-slot="{ href, isActive, navigate }"
                            to="/actors"
                        >
                            <a
                                class="nav-link"
                                :href="href"
                                :class="{ active: isActive }"
                                @click="navigate"
                            >
                                <Icon icon="stars" /><span class="nav-label">Actors</span>
                            </a>
                        </router-link>
                    </li>

                    <li class="nav-item">
                        <router-link
                            v-slot="{ href, isActive, navigate }"
                            to="/networks"
                        >
                            <a
                                class="nav-link"
                                :href="href"
                                :class="{ active: isActive }"
                                @click="navigate"
                            >
                                <Icon icon="earth2" /><span class="nav-label">Networks</span>
                            </a>
                        </router-link>
                    </li>

                    <li class="nav-item">
                        <router-link
                            v-slot="{ href, isActive, navigate }"
                            to="/tags"
                        >
                            <a
                                class="nav-link"
                                :href="href"
                                :class="{ active: isActive }"
                                @click="navigate"
                            >
                                <Icon icon="price-tags" /><span class="nav-label">Tags</span>
                            </a>
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>

        <form
            class="search"
            @submit.prevent="search"
        >
            <input
                v-model="query"
                type="search"
                class="search-input"
                placeholder="Search..."
            >
            <button
                type="submit"
                class="search-button"
            ><Icon
                icon="search"
            /></button>
        </form>
    </header>
</template>

<script>
async function search() {
    this.$router.push({ name: 'search', query: { q: this.query } });
}

export default {
    data() {
        return {
            query: this.$route.query ? this.$route.query.q : null,
        };
    },
    methods: {
        search,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: $background;
    color: $primary;
    border-bottom: solid 1px $shadow-hint;
    font-size: 0;
}

.logo-link {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

.logo {
    display: inline-block;
    padding: .5rem 1rem;
    margin: 0 1rem 0 0;
    font-size: 2rem;

    .icon {
        width: 6rem;
        height: 1.5rem;
    }
}

.nav {
    display: inline-block;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem calc(1rem - 5px) 1rem;
    border-bottom: solid 5px transparent;
    color: $shadow;
    text-decoration: none;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;

    .icon {
        fill: $shadow;
        margin: 0 .5rem 0 0;
    }

    &.active {
        color: $primary;
        border-bottom: solid 5px $primary;

        .icon {
            fill: $primary;
        }
    }

    &:hover:not(.active) {
        color: $primary;

        .icon {
            fill: $primary;
        }
    }
}

.search {
    height: 100%;
    max-width: 20rem;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem 0 0;
    border-left: solid 1px $shadow-hint;
}

.search-input {
    height: 100%;
    width: 100%;
    padding: 0 .5rem;
    border: none;
    outline: none;
    font-size: 1rem;
    outline: none;

    &::placeholder {
        color: $shadow;
    }

    &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        padding: .5rem;
        position: relative;
        right: 0;
        color: $text;
        background: url('/img/cancel-circle2.svg');
        opacity: .25;

        &:hover {
            opacity: .5;
            cursor: pointer;
        }
    }

    &:focus::placeholder {
        color: $shadow-weak;
    }
}

.search-button {
    height: 100%;
    padding: 0 1rem;
    background: none;
    border: none;
    margin: .3rem 0 0 0;

    .icon {
        fill: $shadow-weak;
    }

    &:hover {
        cursor: pointer;

        .icon {
            fill: $shadow;
        }
    }
}

@media(max-width: $breakpoint0) {
    .nav-label {
        display: none;
    }

    .nav .nolist {
        display: flex;
    }

    .nav,
    .nav-item {
        flex-grow: 1;
    }

    .nav-link {


    }
}
</style>