TopBar.vue

<template>
        <v-toolbar class = "top-bar" dense dark color="primary">
      <div class="beta" :title="release">{{version_label}}</div>
      <v-spacer/>
      <v-toolbar-items class="hidden-sm-and-down">
      <v-divider vertical/>
      <v-btn text width="210" v-if="false" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
      <v-divider vertical/>
      <v-menu :close-on-content-click="false">
          <template v-slot:activator= "{ on, attrs }">
              <v-btn v-bind="attrs" v-on="on" text width="210"><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
          </template>
          <v-card>
          <LocaleMenu/>
          <Settings/>
          </v-card>
      
      </v-menu>
            <v-divider vertical/>
      <v-btn text width="210" @click="toggleAbout"><v-icon left>{{$route.name=='about'? "chevron_left":"info"}}</v-icon>{{$route.name=='about'? "Tilbake":"Om ordbøkene"}}</v-btn>
      <v-divider vertical/>
      </v-toolbar-items>
      <v-toolbar-items v-if="$vuetify.breakpoint.mobile">
      <v-divider vertical/>     
        <v-dialog max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
        :close-on-content-click="false" transition="dialog-top-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn text v-bind="attrs" v-on="on">
              <span v-if="$vuetify.breakpoint.mdAndUp">{{$t('menu.title')}}</span><v-icon :right="!$vuetify.breakpoint.mobile">menu</v-icon></v-btn>
          </template>
        <Menu @close="menuDialog=false"/>
        </v-dialog>
      
      </v-toolbar-items>
      <v-divider vertical/>
    </v-toolbar>
</template>

<script>
import Menu from './Menu.vue'
import Settings from './Settings.vue'
import LocaleMenu from './LocaleMenu.vue'

export default {
    name: "TopBar",
    data: function() {
      return {
        version_label: process.env.VUE_APP_VERSION_LABEL,
        release: process.env.VUE_APP_RELEASE,
        menuDialog: false,
      }
    },
    methods: {
      toggleAbout: function() {
        this.$route.name=='about'? this.$router.back(): this.$router.push('/om')
      }
    },
    components: {
        Menu,
        Settings,
        LocaleMenu
    },
}
</script>