Как наложить два меню на Карты Google, по одному на каждой стороне экрана?

Question

Я создаю этот PWA, используя Vue. js с Vuetify. js, и я хочу поместить две кнопки над Картами Google: одну в левой части экрана, чтобы открыть панель навигации, и одну в в правой части экрана, чтобы открыть раскрывающийся список информации о пользователе.

Мне удалось поместить левую туда, где я хочу, но я не могу понять, как разместить значок пользователя в правой части.

Вот как это выглядит сейчас:

Это то, что я ожидал:

Мой шаблон выглядит примерно так:

<div class="overlay">
  <v-row align-content="center">
    <v-icon size="30" @click="drawer = !drawer">mdi-menu</v-icon>
    <v-spacer></v-spacer>
    <v-avatar color="teal" size="30">
      <v-icon dark>mdi-account</v-icon>
    </v-avatar>
  </v-row>
</div>
<div id="g-map"></div>

И мой стиль выглядит так:

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
#g-map {
  width: 100vw;
  height: 100vh;
}
.overlay {
  top: 20px;
  left: 40px;
  z-index: 1;
  position: absolute;
}
</style>

Я пытался добавить right: 20px; и float: right; до <v-avatar>, но это только хуже.

Как это исправить с помощью Vuetify. js или css?

РЕДАКТИРОВАТЬ:

Как это выглядит с <v-toolbar>:

Оба значка находятся в правильных положениях с каждой стороны экрана, но это не наложение Google Maps, как мой бывший ожидаемый результат.

Answer 1

Я смог это исправить, добавив второй div и второй класс. Это было довольно очевидно, если я подумаю об этом.

<div class="overlayLeft">
  <v-icon size="30" @click="drawer = !drawer">mdi-menu</v-icon>
</div>
<div class="overlayRight">
  <v-avatar color="teal" size="30">
    <v-icon dark>mdi-account</v-icon>
  </v-avatar>
</div>
<div id="g-map"></div>

И в моих стилях:

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
#g-map {
  width: 100vw;
  height: 100vh;
}
.overlayLeft {
  top: 20px;
  left: 20px;
  z-index: 1;
  position: absolute;
}
.overlayRight {
  top: 20px;
  right: 20px;
  z-index: 1;
  position: absolute;
}
</style>

Вот как это выглядит сейчас:

Answer 2

Разве это не панель инструментов? Вам нужно обернуть его в v-toolbar do c: https://vuetifyjs.com/en/components/toolbars

<v-toolbar prominent extended>
  <v-app-bar-nav-icon></v-app-bar-nav-icon> 
  <v-spacer></v-spacer>
  <v-btn icon>
    <v-icon>mdi-account</v-icon>
  </v-btn>
</v-toolbar>

Кроме того, все v-ряды должны быть обернуты в v-контейнер. v-col должен быть единственным прямым потомком v-ряда

<v-container>
 <v-row>
   <v-col>
   </v-col>
 </v-row>
</v-container>