A drawer component for vue.js

Drawer.vue

<template>
  <div
    class="drawer"
    :class="{'rotate': !isShow}"
  >
    <div
      class="drawer__knob"
      @click="isShow = !isShow"
      v-if="!isShow"
    >
      Open
    </div>
    <transition
      name="drawer"
      mode="out-in"
    >
      <div
        class="drawer__container"
        :class="{'hidden' : !isShow}"
      >
        <div class="drawer__container-label">
          <span
            class="drawer__container-closer"
            @click="isShow = !isShow"
          >X</span> SELECTED ITEMS
        </div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit sint facere blanditiis ipsam atque mollitia aliquid nulla ratione aspernatur possimus porro maiores, maxime deserunt culpa quod. Omnis iure facilis accusamus!</p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Drawer',
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
.hidden {
  display: none;
}

.rotate {
  transform: rotate(-90deg);
}

.drawer {
  position: fixed;
  right: -14px;
  top: 50vh;
  max-width: 250px;
  background: #ccc;

  &__knob {
    color: white;
    background-color: red;
    width: 80px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
  }

  &__container-label {
    padding: 6px 8px 6px 0;
    background-color: #bbb;
    overflow-y: hidden;
  }

  &__container-closer {
    padding: 8px;
    background-color: #acacac;
    cursor: pointer;
  }
}
</style>