gancio/components/NavHeader.vue

<template>
  <div class="d-flex pa-4 navbar">
    <ul>
      <li>
        <a href="https://orcashub.org">Home</a>
      </li>
      <li>
        <a href="https://orcashub.org/classified/for-sale">Classifieds</a>
      </li>
      <li class="active">
        <a href="/">Events</a>
      </li>
      <li>
        <a href="https://groups.orcashub.org">Groups</a>
      </li>
      <li>
        <a href="https://orcashub.org/community-resources">Resources</a>
      </li>
    </ul>

    <v-spacer/>

    <div class="mobile-only">
      <v-app-bar-nav-icon class="mobile-menu-button" @click.stop="drawer = !drawer" >
        <v-icon v-text="mdiMenu" />
      </v-app-bar-nav-icon>
      <client-only>
        <v-navigation-drawer v-model="drawer" absolute left temporary>
          <v-list nav dense>
            <v-list-item-group
              v-model="group"
              active-class="deep-purple--text text--accent-4"
            >
              <v-list-item tag="a" href="https://orcashub.org">
                <v-list-item-title>Home</v-list-item-title>
              </v-list-item>

              <v-list-item
                tag="a"
                href="https://orcashub.org/classified/for-sale"
              >
                <v-list-item-title>Classifieds</v-list-item-title>
              </v-list-item>

              <v-list-item class="active" nux to="/">
                <v-list-item-title>Events</v-list-item-title>
              </v-list-item>

              <v-list-item tag="a" href="https://groups.orcashub.org">
                <v-list-item-title>Groups</v-list-item-title>
              </v-list-item>

              <v-list-item tag="a" href="https://wiki.orcashub.org">
                <v-list-item-title>Resources</v-list-item-title>
              </v-list-item>

              <v-divider></v-divider>

              <v-list-item
                v-if="$auth.loggedIn && ($auth.user.is_admin || $auth.user.is_editor)"
                nuxt
                to="/admin"
              >
                <v-list-item-title v-text="$t(`common.${$auth.user.role}`)" />
              </v-list-item>

              <v-list-item v-if="$auth.loggedIn" @click="logout">
                <v-list-item-title v-text="$t('common.logout')" />
              </v-list-item>

              <v-list-item v-if="!$auth.loggedIn" nuxt to="/login">
                <v-list-item-title v-text="$t('common.login')" />
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
      </client-only>
    </div>

    <div class='d-flex right-side-header-buttons'>
      <client-only>
        <v-menu offset-y transition="slide-y-transition" bottom max-height=600>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon large v-bind='attrs' v-on='on' aria-label='Language' v-text="$i18n.locale" />
          </template>
          <v-list dense>
            <v-list-item v-for='locale in $i18n.locales' @click.prevent.stop="$i18n.setLocale(locale.code)" :key='locale.code'>
              <v-list-item-content>
                <v-list-item-title v-text='locale.name' />
              </v-list-item-content>
            </v-list-item>
            <v-list-item nuxt target='_blank' href='https://hosted.weblate.org/engage/gancio/'>
              <v-list-item-content>
                  <v-list-item-subtitle v-text='$t("common.help_translate")' />
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
        <v-btn slot='placeholder' large  icon arial-label='Language'>{{$i18n.locale}}</v-btn>
      </client-only> 

      <client-only>
        <v-menu v-if='$auth.loggedIn' offset-y transition="slide-y-transition">
          <template v-slot:activator="{ on, attrs }">
            <v-btn class='mr-0' large icon v-bind='attrs' v-on='on' title='Menu' aria-label='Menu'>
              <v-icon v-text='mdiDotsVertical' />
            </v-btn>
          </template>
          <v-list>
            <v-list-item nuxt to='/settings'>
              <v-list-item-icon><v-icon v-text='mdiCog'></v-icon></v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="$t('common.settings')"/>
              </v-list-item-content>
            </v-list-item>

            <v-list-item nuxt to='/my_events'>
              <v-list-item-icon><v-icon v-text='mdiCalendarAccount'></v-icon></v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="$t('common.my_events')"/>
              </v-list-item-content>
            </v-list-item>


            <v-list-item v-if='$auth.user.is_admin || $auth.user.is_editor' nuxt to='/admin'>
              <v-list-item-icon>
                <v-icon v-text='mdiAccount' />
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title v-text="$t(`common.${$auth.user.role}`)" />
              </v-list-item-content>
            </v-list-item>

            <v-list-item @click='logout'>
              <v-list-item-icon>
                <v-icon v-text='mdiLogout' />
              </v-list-item-icon>

              <v-list-item-content>
                <v-list-item-title v-text="$t('common.logout')" />
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-menu>
        <template #placeholder>
          <v-btn v-if='$auth.loggedIn' large icon aria-label='Menu' title='Menu'>
            <v-icon v-text='mdiDotsVertical' />
          </v-btn>
        </template>
      </client-only>

      <!-- login button -->
      <v-btn class='mr-0' v-if='!$auth.loggedIn' large icon nuxt  to='/login' :title='$t("common.login")' :aria-label='$t("common.login")'>
        <v-icon v-text='mdiLogin' />
      </v-btn>
    </div>
  </div>
</template>
<script>

import { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount } from '@mdi/js'
import { mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return { mdiLogin, mdiDotsVertical, mdiMenu, mdiLogout, mdiAccount, mdiCog, mdiCalendarAccount, drawer: false, group: null }
  },
  watch: {
    group() {
      this.drawer = false
    },
  },
  methods: {
    logout () {
      this.$root.$message('common.logout_ok')
      this.$auth.logout()
    }
  }  
}
</script>