我想创建一个菜单使用vue和vuetify，有一个人字形时展开时上升，而不是展开时下降

npm install vue
npm install vuetify

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" app>
      <v-list>
        <v-list-item v-for="item in menuItems" :key="item.title" @click="item.expanded = !item.expanded">
          <v-list-item-action>
            <v-icon>{{ item.expanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            <v-expand-transition>
              <v-list-group v-model="item.expanded">
                <v-list-item v-for="subItem in item.subItems" :key="subItem" @click="navigate(subItem)">
                  <v-list-item-title>{{ subItem }}</v-list-item-title>
                </v-list-item>
              </v-list-group>
            </v-expand-transition>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-main>
      <!-- 内容区域 -->
    </v-main>
  </v-app>
</template>

<script>
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default {
  data() {
    return {
      drawer: true, // 控制菜单的展开和关闭
      menuItems: [
        { title: '菜单项1', expanded: false, subItems: ['子菜单1', '子菜单2', '子菜单3'] },
        { title: '菜单项2', expanded: false, subItems: ['子菜单4', '子菜单5', '子菜单6'] },
        { title: '菜单项3', expanded: false, subItems: ['子菜单7', '子菜单8', '子菜单9'] }
      ]
    }
  },
  methods: {
    navigate(item) {
      // 处理菜单点击事件，根据点击的菜单项进行导航
    }
  }
}
</script>

<style>
/* 样式 */
</style>

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)