init project

resources/js/vue/components/core/Drawer.vue

@@ -0,0 +1,188 @@
+<template>
+  <v-navigation-drawer
+    id="app-drawer"
+    v-model="inputValue"
+    app
+    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">
+            CSSD-DOC
+          </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>
+        <v-list-tile
+          v-for="(link, i) in links"
+          :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>
+        <!-- <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: '/dashboard',
+        icon: 'mdi-view-dashboard',
+        text: 'Dashboard'
+      },
+      {
+        to: '/my-info',
+        icon: 'mdi-account',
+        text: 'My Info'
+      },
+      {
+        to: '/all-resualttest',
+        icon: 'description',
+        text: 'All Test Result'
+      },
+      {
+        to: '/manage-users',
+        icon: 'far fa-address-book',
+        text: 'Manage Users'
+      },
+      {
+        to: '/test-creator',
+        icon: 'fas fa-vial',
+        text: 'Add a Test Type'
+      },
+      {
+        to: '/submit-test-result',
+        icon: 'done',
+        text: 'Submit Test Result'
+      },
+      {
+        to: '/login',
+        icon: 'input',
+        text: 'Login'
+      },
+      {
+        to: '/register',
+        icon: 'fas fa-plus',
+        text: 'Register'
+      },
+    ],
+    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>