[Vuejs]-How to overlay two menus over Google Maps, one in each side of the screen?

by

0👍

✅

I was able to fix it adding a second div and a second class. It was pretty obvious if I think about it.

<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>

And in my styles:

<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>

This is how it’s looking now:

enter image description here

0👍

Isn’t that a toolbar? You need to wrap it in v-toolbar
doc: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>

Apart from that, all v-row should be wrapped under v-container. v-col should be the only direct child of v-row

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

Leave a comment