SEECBC/FrontEnd/components/base/Drawer.vue

<template>
  <v-navigation-drawer
    v-model="drawer"
    app
    clipped
    :mini-variant="miniVariant"
  >
    <!-- drawer items for student -->
    <v-list class="pb-7">
      <v-list-item to="/learning" color="primary" nuxt>
        <v-list-item-action>
          <v-icon>mdi-view-dashboard</v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title> {{ $t('drawer.levels') }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item to="/assignments" color="primary" nuxt>
        <v-list-item-action>
          <v-icon>mdi-gavel</v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title> {{ $t('drawer.playground') }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'BaseDrawer',
  computed: {
    userType(): string {
      return this.$accessor.userType
    },
    miniVariant: {
      get() {
        return this.$accessor.miniDrawer
      },

      set(value: boolean) {
        this.$accessor.setMiniDrawer(value)
      }
    },
    drawer: {
      get() {
        return this.$accessor.drawer
      },
      set(value: boolean) {
        this.$accessor.setDrawer(value)
      }
    }
  }
})
</script>

<style>
.v-navigation-drawer__border {
  width: 0px;
}
</style>