Vuetify navigation drawer issue

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?

from Vuetify navigation drawer issue