Currently, I am working on developing a Progressive Web App using Vue.js and Vuetify.js. My goal is to have two buttons overlaid on Google Maps - one on the left side of the screen to open a navigation drawer, and another on the right side to display user information.
While I successfully positioned the button on the left side as intended, I encountered difficulty in figuring out how to place the user icon on the right side.
Here is the current layout:
This is what I had envisioned:
The template structure looks like this:
<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>
And here is my CSS styling:
<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>
I attempted adding right: 20px; and float: right; to <v-avatar>, but it did not yield the desired outcome.
How can I achieve the expected result using Vuetify.js or css?
EDIT:
When incorporating <v-toolbar>, this is how the layout appears:
Both icons are correctly positioned on either side of the screen with this setup, however, they do not overlay Google Maps as anticipated.