Vuetify Navigation Drawer Drag To Resize

Question

So I have gotten it to where the the 'drag to resize' works - it just feels a little laggy... does anyone know why this may be, and how to fix it?

I have tried forcing a refresh using vm.$forceUpdate() but that did not seem to do anything..

The CodePen can be found here.

---

EDIT: Added demo code working solution to this question/post. This way if something happens to the CodePen, we still have working demo code.

new Vue({
  el: "#app",
  data: () => {
    return {
      navigation: {
        shown: false,
        width: 200,
        borderSize: 3
      }
    };
  },
  computed: {
    direction() {
      return this.navigation.shown === false ? "Open" : "Closed";
    }
  },
  methods: {
    setBorderWidth() {
      let i = this.$refs.drawer.$el.querySelector(
        ".v-navigation-drawer__border"
      );
      i.style.width = this.navigation.borderSize + "px";
      i.style.cursor = "ew-resize";
      i.style.backgroundColor = "red";
    },
    setEvents() {
      const minSize = this.navigation.borderSize;
      const el = this.$refs.drawer.$el;
      const drawerBorder = el.querySelector(".v-navigation-drawer__border");
      const vm = this;
      const direction = el.classList.contains("v-navigation-drawer--right") ?
        "right" :
        "left";

      function resize(e) {
        document.body.style.cursor = "ew-resize";
        let f =
          direction === "right" ?
          document.body.scrollWidth - e.clientX :
          e.clientX;
        el.style.width = f + "px";
      }

      drawerBorder.addEventListener(
        "mousedown",
        (e) => {
          if (e.offsetX < minSize) {
            el.style.transition = "initial";
            document.addEventListener("mousemove", resize, false);
          }
        },
        false
      );

      document.addEventListener(
        "mouseup",
        () => {
          el.style.transition = "";
          this.navigation.width = el.style.width;
          document.body.style.cursor = "";
          document.removeEventListener("mousemove", resize, false);
        },
        false
      );
    }
  },
  mounted() {
    this.setBorderWidth();
    this.setEvents();
  }
});

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-navigation-drawer ref="drawer" app right hide-overlay :width="navigation.width" v-model="navigation.shown">
      <v-toolbar color="primary">
        <v-toolbar-title class="headline text-uppercase">
          <span>t a</span><span class="font-weight-light"> b s </span>
        </v-toolbar-title>
      </v-toolbar>
      <v-tabs>
        <v-tab v-for="n in 3" :key="n">
          Item {{ n }}
        </v-tab>
        <v-tab-item v-for="n in 3" :key="n">
          <v-card flat>
            <v-card-text>Content for tab {{ n }} would go here</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs>
    </v-navigation-drawer>
    <v-container>
      <v-layout justify-center>
        <v-btn @click="navigation.shown = !navigation.shown">Toggle {{ direction }}</v-btn>
      </v-layout>
      <v-layout justify-center>
        <p>Once the navigation drawer is opened, drag it's border to resize (highlited in red)</p>
      </v-layout>
    </v-container>
  </v-app>
</div>

Answer 1

Thats because of transition effect on navigation drawer. set transition to initial at mouse down, then release that on mouse up.

at mousedown add

el.style.transition ='initial';

at mouseup add

el.style.transition ='';

Codepen : https://codepen.io/dagalti/pen/ywRNYx