在Vuetify 1.5中，如何在v-toolbar中获得美观的v-menu？

Question

This is my toolbar, and I have problems with the the first button/menu. I want it, when highlighted to have the same look as when the other buttons are highlighted. I've tried with py-3 and py-2 class on the v-btn, but then it gets squeed or does not fill the entire toolbar erea.

 <v-toolbar dark dense app color="blue-grey darken-2">
  <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
  <v-toolbar-title class="text-uppercase">
    <router-link :to="{ name: 'home' }" class="brand-logo white--text">
      <span>Byte</span>
      <span class="font-weight-light">[Gym]</span>
    </router-link>
  </v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items class="hidden-sm-and-down">
    <v-menu v-if="user" offset-y transition="slide-y-transition" open-on-hover>
      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on">
          <v-icon>expand_more</v-icon><v-btn flat to="/training">Training</v-btn>
        </v-btn>
      </template>
      <v-list>
        <v-list-tile v-for="item in traininglinks" :key="item.text" router :to="item.route">
          <v-list-tile-title>{{ item.text }}</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-menu>
    <v-btn flat to="/nutrition">Nutrition</v-btn>
    <v-btn flat to="/about">About</v-btn>
  </v-toolbar-items>
  <v-spacer></v-spacer>
  <v-btn v-if="user" flat>{{user.email}}</v-btn>
  <v-btn v-if="!user" icon to="/login">
    <v-icon>account_circle</v-icon>
  </v-btn>
  <v-btn v-if="user" icon @click="logout">
    <v-icon right>exit_to_app</v-icon>
  </v-btn>
  <v-btn icon>
    <v-icon>search</v-icon>
  </v-btn>
  <v-btn icon class="hidden-sm-and-up">
    <v-icon>more_vert</v-icon>
  </v-btn>
</v-toolbar>

I want it to look like the other buttons when they are active, but now its only a tiny box around it. I feels this should work out of the box? Can't find an answer for this anywhere..

Answer 1

So the problem here is that you're putting a button inside of a button. If you remove the v-btn around Training then it works the way it's supposed to.

      <template v-slot:activator="{ on }">
        <v-btn flat v-on="on">
          <v-icon>expand_more</v-icon>Training
        </v-btn>
      </template>

Working codepen here: https://codepen.io/CodingDeer/pen/rNBjLOJ?editors=1010