traxxx/assets/components/header/header.vue

<template>
    <header class="header">
        <div class="header-nav">
            <Icon
                icon="menu"
                class="sidebar-toggle"
                @click.native.stop="toggleSidebar"
            />

            <router-link
                to="/"
                class="logo-link"
            ><h1 class="header-logo">
                <div
                    class="logo"
                    v-html="logo"
                />
            </h1></router-link>

            <nav class="nav">
                <ul class="nav-list 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"
                            >Actors</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"
                            >Networks</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"
                            >Tags</a>
                        </router-link>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="header-section">
            <div class="header-toggles">
                <Icon
                    v-show="!sfw"
                    icon="flower"
                    class="toggle noselect"
                    @click.native="setSfw(true)"
                />

                <Icon
                    v-show="sfw"
                    icon="flower"
                    class="toggle active noselect"
                    @click.native="setSfw(false)"
                />

                <Icon
                    v-show="theme === 'light'"
                    icon="moon"
                    class="toggle noselect"
                    @click.native="setTheme('dark')"
                />

                <Icon
                    v-show="theme === 'dark'"
                    icon="sun"
                    class="toggle noselect"
                    @click.native="setTheme('light')"
                />
            </div>

            <Search class="search-full" />

            <v-popover
                class="search-compact"
                :open="searching"
                @show="searching = true"
                @hide="searching = false"
            >
                <button
                    type="button"
                    class="search-button"
                ><Icon
                    icon="search"
                /></button>

                <Search
                    slot="popover"
                    :searching="searching"
                    class="compact"
                    @search="searching = false"
                />
            </v-popover>
        </div>
    </header>
</template>

<script>
import { mapState } from 'vuex';

import Search from './search.vue';

import logo from '../../img/logo.svg';

function sfw(state) {
    return state.ui.sfw;
}

function theme(state) {
    return state.ui.theme;
}

function setTheme(newTheme) {
    this.$store.dispatch('setTheme', newTheme);
}

function setSfw(enabled) {
    this.$store.dispatch('setSfw', enabled);
}

export default {
    components: {
        Search,
    },
    props: {
        toggleSidebar: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
            logo,
            searching: false,
        };
    },
    computed: {
        ...mapState({
            sfw,
            theme,
        }),
    },
    methods: {
        setSfw,
        setTheme,
    },
};
</script>

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

.header {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background);
    color: var(--primary);
    box-shadow: 0 1px 0 var(--darken-hint);
    font-size: 0;
}

.header-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

.header-section {
    height: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
}

.sidebar-toggle {
    display: none;
    fill: var(--shadow-modest);
    padding: 0 1rem;
    width: 1.5rem;
    height: 100%;

    &:hover {
        fill: var(--primary);
        cursor: pointer;
    }
}

.logo-link {
    height: 100%;
    display: inline-block;
    text-decoration: none;
    margin: 0 1rem 0 0;
}

.header-logo {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0 0 1rem;
}

.logo {
    width: 6rem;
    display: flex;
}

.nav,
.nav-list {
    display: inline-block;
    height: 100%;
}

.nav-item {
    height: 100%;
}

.nav-link {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: var(--shadow);
    text-decoration: none;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;

    &.active {
        color: var(--primary);

        .icon {
            fill: var(--primary);
        }
    }

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

        .icon {
            fill: var(--primary);
        }
    }
}

.header-toggles {
    margin: 0 .5rem 0 0;

    .icon {
        padding: 1rem .75rem;
        fill: var(--shadow);

        &:hover {
            fill: var(--shadow-strong);
            cursor: pointer;
        }

        &.active {
            fill: var(--primary);
        }
    }
}

.search-compact {
    display: none;
    height: 100%;
}

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

    .icon {
        fill: var(--shadow);
    }

    &:hover {
        cursor: pointer;

        .icon {
            fill: var(--shadow-strong);
        }
    }
}

@media(max-width: $breakpoint2) {
    .search-full {
        display: none;
    }

    .search-compact {
        display: flex;
    }

    .header-toggles {
        margin: 0;
    }
}

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

    .sidebar-toggle {
        display: inline-block;
    }

    .header-logo {
        padding: 0 0 0 .5rem;
    }
}
</style>