cjvt-valency/src/frontend_vue/src/components/Nav.vue

<template>
<nav>
    <b-navbar toggleable="md" type="light" variant="light">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <b-navbar-brand>Vezljivostni vzorci slovenskih glagolov</b-navbar-brand>
    <b-collapse is-nav id="nav_collapse">

    <b-navbar-nav>
        <b-nav-item-dropdown text="korpus" right>
            <b-dropdown-item v-for="option in optCorpora"
                :value="option"
                :key="option"
                v-on:click="updateCorpus(option)"
            >
                {{ option }}
            </b-dropdown-item>
        </b-nav-item-dropdown>
    </b-navbar-nav>

    <b-navbar-nav>
        <b-nav-item-dropdown text="prikaz" right>
            <b-dropdown-item v-for="option in optIndexes"
                :value="option.val"
                :key="option.val"
                v-on:click="updateIndex(option.val)"
            >
                {{ option.key }}
            </b-dropdown-item>
        </b-nav-item-dropdown>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto" right v-if="this.loggedIn()">
        <b-nav-item>
            Uporabnik: {{ this.$root.store.username }} 
            <a href="#" v-on:click="logOut()">(odjava)</a>
        </b-nav-item>
    </b-navbar-nav>
    <b-navbar-nav class="ml-auto" right v-else>
        <b-nav-item>
            <router-link to="/register">
                Registracija
            </router-link>
        </b-nav-item>
        <b-nav-item>
            <router-link to="/login">
                Prijava
            </router-link>
        </b-nav-item>
    </b-navbar-nav>

    </b-collapse>
    </b-navbar>
    </nav>
</template>

<script>
export default {
    name: "Nav",
    props: ["appState"],
    data() {return {
        optIndexes: [
            {key: "besede", val: "words"},
            {key: "udeleženske vloge", val: "functors"},
        ],
        optCorpora: ["kres", "ssj"],
    }},
    methods: {
        updateAll() {
            this.$root.store.radio = "one"
            this.$router.push({
                name: "Home"
            })
        },
        updateCorpus(val) {
            this.$root.store.selCorpus = val
            this.updateAll()
        },
        updateIndex(val) {
            this.$root.store.selIndex = val
            this.updateAll()
        },
        loggedIn() {
            return (this.$root.store.token !== null)
        },
        logOut() {
            this.$root.store.token = null
            this.$root.store.username = null
            this.$router.push({
                name: "Home"
            })
        }
    }
}
</script>