fix

src/components/core/Drawer.vue

@@ -0,0 +1,192 @@
+<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>