gamebrary/src/components/NavHeader/NavHeader.vue

<template lang="html">
    <nav :class="{ dark: darkModeEnabled }">
        <button class="logo" v-if="isShareList">
            <img src='/static/gamebrary-logo.png' />
            GAMEBRARY
        </button>

        <router-link
            v-else
            tag="button"
            class="logo"
            :to="{ name: homeRoute }"
        >
            <img src='/static/gamebrary-logo.png' />
            {{ logoText }}
        </router-link>

        <div class="links" v-if="user">
            <modal title="Releases" large padded>
                <button :class="whatsNewClass">
                    <i class="fas fa-bullhorn" />
                    What's new
                </button>

                <releases slot="content" />
            </modal>

            <modal
                padded
                title="Settings"
            >
                <button class="hollow small">
                    <i class="fas fa-cog" />
                </button>

                <settings slot="content" v-if="settings" />
            </modal>
        </div>
    </nav>
</template>

<script>
import Releases from '@/components/Releases/Releases';
import Modal from '@/components/Modal/Modal';
import { mapState, mapGetters } from 'vuex';
import Settings from '@/components/Settings/Settings';

export default {
    components: {
        Releases,
        Settings,
        Modal,
    },

    computed: {
        ...mapState(['user', 'platform', 'settings']),
        ...mapGetters(['darkModeEnabled']),

        isAuthRoute() {
            return this.$route.name === 'auth';
        },

        isShareList() {
            return this.$route.name === 'share-list';
        },

        logoText() {
            return this.$route.name === 'game-board' && this.platform
                ? this.platform.name
                : 'GAMEBRARY';
        },

        whatsNewClass() {
            const buttonStyle = this.darkModeEnabled
                ? 'accent'
                : 'info';

            return `filled small ${buttonStyle}`;
        },

        homeRoute() {
            if (this.$route.name === 'game-detail' && this.platform) {
                return 'game-board';
            }

            if (this.$route.name === 'game-board') {
                return 'platforms';
            }

            return null;
        },
    },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @import "~styles/styles.scss";
    nav {
        user-select: none;
        width: 100vw;
        height: $navHeight;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 $gp;
        color: $color-dark-gray;

        .logo {
            height: $navHeight;
            font-weight: bold;
            display: flex;
            align-items: center;
            margin-left: -$gp;

            img {
                height: 24px;
                margin-right: $gp / 4;
            }
        }

        &.dark {
            color: $color-gray !important;
        }

        .links {
            display: flex;
            align-items: center;
        }
    }
</style>