@turigeza said in [v1] How to Activate qBtnDropDown menu on mouseover:

@folami

Opening the menu on hover. Almost works : ) Sometimes it doesn’t open not sure why. Maybe somebody else helps you with it. Closing it is more difficult. This is Quasar V1

<div class="q-pa-md">
            <q-btn-dropdown color="primary" label="Dropdown Button" v-model="menu" @mouseover.native="menu = true">
                <q-list>
                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Photos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Videos</q-item-label>
                        </q-item-section>
                    </q-item>

                    <q-item clickable>
                        <q-item-section>
                            <q-item-label>Articles</q-item-label>
                        </q-item-section>
                    </q-item>
                </q-list>
            </q-btn-dropdown>
        </div>

#thanksAlots

How to make vuex state persist after page reload/refresh …I tried using vuex-persistedstate but couldnt get it working

Working perfectly, thanks

found the problem! I was running the app on SSR mode but, When I disable SSR run SPA mode it works.
But I need for SSR mode because my app is suppose to be run on SSR mode…
I still need solution to this please

@tof06 Sorry for late response, it works thanks so much

I’m want to add a triangular pointer to q-menu menu like this topic on stackoverflow.

https://stackoverflow.com/questions/16237181/how-to-add-bordered-triangle-over-a-div-tag

@tof06 thanks, I will try it and let you know if it works

@tof06 please I would like to see an example of this

@Pratik-Patel, I have thought about this but my app is in SSR mode and Platform Plugin needs to parse ssrContext during ssr rendering which is only available in boot file plugins and prefetch but not in router

function (ssrContext) {
  const platform = process.env.SERVER
    ? Platform.parseSSR(ssrContext)
    : Platform // otherwise we're on client

  // platform is equivalent to the global import as in non-SSR builds
}

How do I achieve this…

const router = [
  {
     path: '/someroute'
     component:  () => Platform.is.mobile ? import('layouts/mainLayout.vue') : import('layouts/mobileView.vue')
   ...
  }
]

Thanks

@s-molinari well, i tried your approach it works but i couldn’t control other props such overlay and breakpoint and to hide qdrawer under toolbar.
but i found myself a quark solution:

mounted () {
  leftDrawer = true
  setTimeout(() => {
    leftDrawer = false
   }, 0)
}

Please, I would like to know if there is a better way to do this

I don’t wanna display the q-drawer @initial rendering
and I tried :show-if-above=“false” but it wouldnt work?
Please is there a way to disable this?

I discovered the result of my web app on google tries to show the material icons that I used on the web site, but instead shows icon names e.g Menu, location_on, mail, account_circle, arrow_drop_down…etc
Please How do i deal with this? and if possible can I hide them from SEO Crawlers?

I got a similar solution online but this didn’t work with front-end frameworks