在vuetify中展开导航抽屉时避免按钮重叠？

<template>
  <v-app>
    <v-navigation-drawer v-model="drawerOpen">
      <!-- 抽屉内容 -->
    </v-navigation-drawer>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawerOpen = !drawerOpen"></v-app-bar-nav-icon>
      <!-- 其他按钮和内容 -->
    </v-app-bar>
    <v-main>
      <!-- 页面主要内容 -->
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawerOpen: false
    };
  }
};
</script>

<template>
  <v-app>
    <v-navigation-drawer v-model="drawerOpen">
      <!-- 抽屉内容 -->
    </v-navigation-drawer>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawerOpen = !drawerOpen"></v-app-bar-nav-icon>
      <v-btn v-if="!drawerOpen">其他按钮</v-btn>
      <!-- 其他按钮和内容 -->
    </v-app-bar>
    <v-main>
      <!-- 页面主要内容 -->
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawerOpen: false
    };
  }
};
</script>

<template>
  <v-app>
    <v-navigation-drawer v-model="drawerOpen" mini-variant>
      <!-- 抽屉内容 -->
    </v-navigation-drawer>
    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawerOpen = !drawerOpen"></v-app-bar-nav-icon>
      <!-- 其他按钮和内容 -->
    </v-app-bar>
    <v-main>
      <!-- 页面主要内容 -->
    </v-main>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawerOpen: false
    };
  }
};
</script>