Vuetify navigation drawer issue

Question

I want to have a vuetify "temporary navigation drawer" with scaling width. The vuetify component comes with 300px width by default, so I overrid it like so (using https://vuetifyjs.com/en/components/navigation-drawers "Temporary" example)

<template>
  <v-layout
    wrap
    style="height: 200px;"
  >
    <v-container>
      <v-layout justify-center>
        <v-btn
          color="pink"
          dark
          @click.stop="drawer = !drawer"
        >
          Toggle
        </v-btn>
      </v-layout>
    </v-container>

    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
      style="width: 13vw"                //I change width to 13vw here
    >

    </v-navigation-drawer>
  </v-layout>
</template>

The problem is, when the menu is not activated, it is hidden 300px to the left of the viewport. My scaling 13vw width, on larger displays, will become larger than 300px, and therefore leave a sliver of the navigation menu unhidden in the left. How can I change the default hiding of the navigation menu?

Jsfiddle: https://jsfiddle.net/agreyfield91/tgpfhn8m/957/ Zoom out with the navigation drawer unactivated to see what I'm talking about

Answer 1

So the vuetify component doesn't support using anything but pixels for the width property of the component so you have two options. You can use the width property with pixels instead. Or you can add a bit of a css hack to use vw instead.

Option 1: change your v-navigation-drawer to the following:

<v-navigation-drawer
    v-model="drawer"
    absolute
    temporary
    width="500"
>

Option 2:

add this to your css

.v-navigation-drawer--close.v-navigation-drawer--temporary {
    transform: translateX(-13vw) !important;
}