Is it possible to display two menus on opposite sides of the screen while using Google Maps?

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:

https://i.sstatic.net/QQz4t.png

This is what I had envisioned:

https://i.sstatic.net/GnwtA.png

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:

https://i.sstatic.net/jHRqB.png

Both icons are correctly positioned on either side of the screen with this setup, however, they do not overlay Google Maps as anticipated.

cssgoogle-mapsvue.jsvuetify.js

Answer №1

Is that a toolbar you're working with? Make sure to enclose it within v-toolbar elements. For more details, refer to the documentation here: 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>

In addition to that, ensure all v-row elements are nested within v-container. v-col should be a direct child of v-row.

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

Answer №2

I managed to solve the issue by introducing an additional div and class. In hindsight, the solution seems quite obvious.

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

As for 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 the updated appearance:

https://i.sstatic.net/7jwaA.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalized Grid Design for Showcasing Athletic Teams

I am looking to create a custom grid layout that represents the team's Players, separated by their positions (GK, Defense, Midfielders, and Forwards), similar to the image below. The layout should also be responsive like in image 1. Currently, the re ...

javascripthtmlcssreactjs

Hide a div when multiple classes are filtered using jQuery

I have several divs with the class .item. When the user clicks on the Classfilter submit button, all .item elements that also have at least one class from the dateClasses array (for example ['28.09.2015', '29.09.2015']) should be hidden ...

javascriptjqueryhtmlcss

Setting up Laravel Echo and Pusher-JS in a VueJS application

I'm currently utilizing laravel-echo and pusher-js in a project that combines Laravel and VueJS, and it's functioning well. However, I now face the challenge of broadcasting in a pure VueJS project without any dependency on Laravel. I am uncert ...

vue.jslaravel-echopusher-js

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

Whenever I adjust the size of my webpage on different devices or mobile phones, I notice that the <div> tag appears to be only half (or even less) the width of the page. This gap seems to increase as the window size decreases. Refer to the screenshot ...

htmlcssviewport

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

javascriptjqueryhtmlcss

Error in Vue.js: Trying to access properties of an undefined object

My understanding of vue.js is limited, but based on what I know, this code should work. However, when attempting to access the variable in the data property, it seems unable to locate it. data: function() { return { id: 0, clients: [] ...

javascriptvue.js

Utilizing Jquery to Add Elements and Adjust Element Height

Encountering an unusual issue where the height of a div is not updating when content is appended to it using JQuery. To demonstrate the problem, I have created a simple JSFiddle: http://jsfiddle.net/hf66v/5/ Here is the initial HTML structure: <div i ...

jqueryhtmlcss

``What is the best approach for specifying property types when passing props to grandchildren within a Vue.js component hierarchy

I have a Vue component named foo embedded in my HTML, and I am passing a parameter to it as shown below: <foo some="Some String"></foo> Within the foo component, I define the property type and default value in the following manner: export d ...

vue.js

The scrolling behavior varies in Firefox when using the mouse wheel

Currently, I am working on a website where I want to display large text on the screen and have the ability to scroll two divs simultaneously. This functionality is already in place. I can scroll the divs, but I'm facing an issue with the jumps being t ...

javascriptjquerycssfirefoxscroll

How to leverage onpopstate in Vuejs without relying on vue-router

I am currently utilizing vue.js in conjunction with laravel, specifically incorporating a vue component within a laravel blade file. My aim is to trigger a page reload upon pressing the back navigation button to return to the previous page. The code I have ...

javascriptjquerylaravelvue.js

Unveil concealed information within a freshly enlarged container

As I organize my content into an FAQ format, I want users to be able to click on a link and expand the section to reveal a list of items that can also be expanded individually. My goal is to have certain list items expand automatically when the FAQ section ...

javascriptjquerycssslidetoggle

Display content in two columns. If the width of the left column is too narrow, move the content in the right column

In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width: <div id="wrapper"> <div id="l ...

htmlcss

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

javascripthtmlcss

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Combining multiple data sources into a single input field in VueJs

I've been exploring the idea of incorporating multiple values into a vue form input binding Here's an example snippet of my code. <template> <div> <label for=""> Employee </label> <input class="form-contro ...

javascriptvue.jsmodel-binding

``How can I lock the top row of an HTML table containing input fields in place while

Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...

javascripthtmlcss

The disappearing background of a div is causing a ripple effect on the other divs layered on top of the

I'm facing an issue with my main div that has a background image filling the screen. While I've managed to make the image change constantly, the problem arises when the divs on top of the background div also fade out, making the whole page go bla ...

jqueryhtmlcss

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

VueJS - Vuefire - Unexpected Error: document.onSnapshot is not a valid function

I'm currently working on integrating Vuefire into my project. I have been following the instructions provided on the Vuefire website, but I am encountering an error. db.js: import firebase from 'firebase/app' import 'firebase/firestore ...

javascriptfirebasevue.jsvuefire