cssd-front/src/components/core/Drawer.vue

<template>
  <v-navigation-drawer id="app-drawer" v-model="inputValue" app absolute dark floating persistent mobile-break-point="991"
    width="260">
    <v-img :src="image" height="100%">
      <v-layout class="fill-height" tag="v-list" column>
        <v-list-tile avatar>
          <v-list-tile-avatar color="white">
            <!-- <v-img
              :src="logo"
              height="34"
              contain
            /> -->
          </v-list-tile-avatar>
          <v-list-tile-title class="title">
            {{ $store.state.user.name }}
            <br />
            {{ $store.state.user.medical_center?.name }}
          </v-list-tile-title>

        </v-list-tile>
        <v-divider />
        <v-list-tile v-if="responsive">
          <v-text-field class="purple-input search-input" label="Search..." color="purple" />
        </v-list-tile>
        <template v-for="(link, i) in links">
          <v-list-tile v-if="!link.role || $hasRole(link.role)" :key="i" :to="link.to" :active-class="color" avatar
            class="v-list-item">
            <v-list-tile-action>
              <v-icon>{{ link.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-title v-text="link.text" />
          </v-list-tile>
        </template>
        <!-- <v-list-tile
          disabled
          active-class="primary"
          class="v-list-item v-list__tile--buy"
          to="/upgrade"
        >
          <v-list-tile-action>
            <v-icon>mdi-package-up</v-icon>
          </v-list-tile-action>
          <v-list-tile-title class="font-weight-light">
            Upgrade To PRO
          </v-list-tile-title>
        </v-list-tile> -->
      </v-layout>
    </v-img>
  </v-navigation-drawer>
</template>

<script>
// Utilities
import {
  mapMutations,
  mapState
} from 'vuex'

export default {
  data: () => ({
    logo: './img/vuetifylogo.png',
    links: [
      {
        to: { name: 'Dashboard' },
        icon: 'mdi-view-dashboard',
        text: 'Dashboard'
      },
      {
        to: { name: 'MyInfo' },
        icon: 'mdi-account',
        text: 'My Info'
      },
      {
        to: { name: 'SubmitTestResult' },
        icon: 'fas fa-vial',
        text: 'Add a Test Result'
      },
      {
        to: { name: 'AllResultTest' },
        icon: 'description',
        text: 'All Test Result'
      },
      {
        to: { name: 'ManageUsers' },
        icon: 'far fa-address-book',
        text: 'Manage Users',
        role: 'Admin|Supervisor',
      },
      {
        to: { name: 'ListTestType' },
        icon: 'fas fa-vial',
        text: 'List Test Type',
        role: 'Admin'
      },
      {
        to: { name: 'AllItem' },
        icon: 'far fa-clone',
        text: 'Items',
        role: 'Admin|Supervisor'
      },
      {
        to: { name: 'MyItem' },
        icon: 'far fa-clone',
        text: 'My Items',
        role: 'User|Admin|Supervisor'
      },
      {
        to: { name: 'AllPackage' },
        icon: 'fas fa-archive',
        text: 'Packages',
        role: 'Admin|Supervisor'
      },
      {
        to: { name: 'AllLabels' },
        icon: 'fas fa-inbox',
        text: 'Labels'
      },
      {
        to: { name: 'AllCycle' },
        icon: 'cached',
        text: 'Cycles'
      },
      {
        to: { name: 'Statistics' },
        icon: 'fas fa-chart-bar',
        text: 'Statistics',
      },
      {
        to: { name: 'Tickets' },
        icon: 'style',
        text: 'Tickets',
      },
    ],
    responsive: false
  }),
  computed: {
    ...mapState('app', ['image', 'color']),
    inputValue: {
      get() {
        return this.$store.state.app.drawer
      },
      set(val) {
        this.setDrawer(val)
      }
    },
    items() {
      return this.$t('Layout.View.items')
    }
  },
  mounted() {
    this.onResponsiveInverted()
    window.addEventListener('resize', this.onResponsiveInverted)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResponsiveInverted)
  },
  methods: {
    ...mapMutations('app', ['setDrawer', 'toggleDrawer']),
    onResponsiveInverted() {
      if (window.innerWidth < 991) {
        this.responsive = true
      } else {
        this.responsive = false
      }
    }
  }
}
</script>

<style lang="scss">
#app-drawer {
  .v-list__tile {
    border-radius: 4px;

    &--buy {
      margin-top: auto;
      margin-bottom: 17px;
    }
  }

  .v-image__image--contain {
    top: 9px;
    height: 60%;
  }

  .search-input {
    margin-bottom: 30px !important;
    padding-left: 15px;
    padding-right: 15px;
  }
}
</style>