ffplayout/components/Menu.vue

<template>
    <div>
        <div class="menu">
            <b-nav align="right">
                <b-nav-item to="/" class="nav-item" exact-active-class="active-menu-item">
                    Home
                </b-nav-item>
                <b-nav-item to="/player" exact-active-class="active-menu-item">
                    Player
                </b-nav-item>
                <b-nav-item to="/media" exact-active-class="active-menu-item">
                    Media
                </b-nav-item>
                <b-nav-item to="/message" exact-active-class="active-menu-item">
                    Message
                </b-nav-item>
                <b-nav-item to="/logging" exact-active-class="active-menu-item">
                    Logging
                </b-nav-item>
                <b-nav-item to="/configure" exact-active-class="active-menu-item">
                    Configure
                </b-nav-item>
                <b-nav-text v-if="configGui.length > 1">
                    &nbsp;&nbsp;
                </b-nav-text>
                <b-nav-item-dropdown v-if="configGui.length > 1" :text="configGui[configID].name" right>
                    <b-dropdown-item v-for="(channel, index) in configGui" :key="index" @click="selectChannel(index)">
                        {{ channel.name }}
                    </b-dropdown-item>
                </b-nav-item-dropdown>
                <b-nav-text v-if="configGui.length > 1">
                    &nbsp;&nbsp;
                </b-nav-text>
                <b-nav-item @click="logout()">
                    Logout
                </b-nav-item>
            </b-nav>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'Menu',

    computed: {
        ...mapState('config', ['configID', 'configGui'])
    },

    methods: {
        logout () {
            try {
                this.$store.commit('auth/REMOVE_TOKEN')
                this.$store.commit('auth/UPDATE_IS_LOGIN', false)
                this.$router.push('/')
            } catch (e) {
                this.formError = e.message
            }
        },

        selectChannel (index) {
            this.$store.commit('config/UPDATE_CONFIG_ID', index)
            this.$store.dispatch('config/getPlayoutConfig')
        }
    }
}
</script>

<style lang="scss" >
.menu {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: .5em;
}

.nav-item {
    background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
    background-repeat: no-repeat;
    height: 28px;
    margin: .05em;
    border-radius: 3px;
    font-size: .95em;
}

.nav-item:hover {
    background-image: linear-gradient(#5a636c, #4c545b 60%, #42484e);
    background-repeat: no-repeat;
}

.nav-item a {
    padding: .2em .6em .2em .6em;
}

.active-menu-item {
    position: relative;
}

.active-menu-item::after {
    background: #ff9c36;
    content: " ";
    width: 100%;
    height: 2px;
    color: red;
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    border-radius: 1px;
}
</style>