Correct way to apply clipped prop to <v-navigation-bar/> in Vuetify

user_590028 0
Viewed 2498

Unsure of correct way to apply clipped prop to <v-navigation-draw/> in vuetify application to force the navigation drawer to sit below the app-bar. What I've tried.

Created a fresh project:

$ vue create mylayout
$ cd mylayout
$ vue add vuetify

Cut & paste the Baseline pre-made layout (https://vuetifyjs.com/en/getting-started/pre-made-layouts/) into src/App.vue

Edit the <v-navigation-drawer/>

<v-navigation-drawer
      v-model="drawer"
      app
      clipped         <--- added this prop
>

Edit the <v-app-bar/>

<v-app-bar
  app
  color="indigo"
  dark
  clipped-left        <--- added this prop
>

View in FireFox 75.0, and click the app-bar Hamburger icon, and the navigation drawer 'pops over' the app-bar. I've poured over the docs and samples for hours with no-joy. I know I'm missing something, but it's escaping me.

material-design vuetify.js vue.js
2 Answers

I have fixed the navigation clipped issue and how it interacts with other properties with just a few added lines.

The basic issue is that the clipped prop does not work without also applying the 'permanent' prop to v-navigation-drawer.

So... simply adding the 'permanent' prop fixes the issue. However:

What if you want it to hide reactively as if you didnt need to apply the permanent prop? Use v-if on v-navigation-drawer with the same field as you use on the v-model prop, then wrap the entire thing in a v-expand-x-transition.

Example:

<v-expand-x-transition appear>
    <v-navigation-drawer>
        v-if="drawer"
        v-model="drawer"
        app
        clipped
        permanent
    >
</v-expand-x-transition>

edit: To make the transition smooth on the first time it appears, give the v-expand-x-transition the 'appear' prop

user_130386290

The issue was caused by the VNavigationDrawer component's isMobile computed property. I had my personal view in FireFox zoomed in. Vuetify considered my view to equate to the component being rendered on a mobile device and ignored the clipped prop.

The solution is to either extend the VNavigationBar component and drop the check for isMobile, or is zoom out (I choose to zoom out).

In case anyone else stumbles across this, I've included the relevant isMobile() calculation below and included the comment.

isMobile (): boolean {
  return (
    !this.stateless &&
    !this.permanent &&
    // The next line is the check for a mobile-width view
    this.$vuetify.breakpoint.width < parseInt(this.mobileBreakPoint, 10)
  )
},
user_5900280
Related