raven/app/ayanova/src/App.vue

<template>
  <v-app id="inspire">
    <v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
      <v-list dense>
        <v-list-tile v-for="item in navItems" :key="item.title" :to="item.route">
          <v-list-tile-action>
            <v-icon>{{ "fa-" + item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <!-- <v-list-tile to="/">
          <v-list-tile-action>
            <v-icon>fa-home</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Home</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/service">
          <v-list-tile-action>
            <v-icon>fa-toolbox</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Service</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/dispatch">
          <v-list-tile-action>
            <v-icon>fa-shipping-fast</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dispatch</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

        <v-list-tile to="/inventory">
          <v-list-tile-action>
            <v-icon>fa-dolly</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Inventory</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>

        <v-list-tile to="/accounting">
          <v-list-tile-action>
            <v-icon>fa-file-invoice-dollar</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Accounting</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/admin">
          <v-list-tile-action>
            <v-icon>fa-user-tie</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Administration</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/ops">
          <v-list-tile-action>
            <v-icon>fa-cogs</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Operations</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile to="/about">
          <v-list-tile-action>
            <v-icon>fa-info-circle</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>About</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile
          v-if="this.$store.state.authenticated"
          to="/login"
          v-on:click.native="logout()"
        >
          <v-list-tile-action>
            <v-icon>fa-sign-out-alt</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Log off</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>-->

        <!--Nav menu links END-->
      </v-list>
    </v-navigation-drawer>
    <v-toolbar v-if="isAuthenticated" color="indigo" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <v-avatar size="32px" tile>
          <img :src="require('./assets/logo.svg')" alt="AyaNova">
        </v-avatar>
        <span class="hidden-sm-and-down">AyaNova</span>
      </v-toolbar-title>
      <v-text-field flat solo-inverted hide-details prepend-inner-icon="fa-search" label="Search"></v-text-field>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>fa-bell</v-icon>
      </v-btn>
      <!-- <v-btn icon large>
        <v-avatar size="32px" tile>
          <img
          :src="require('./assets/logo.svg')"
          
            alt="Vuetify"
          >
        </v-avatar>
      </v-btn>-->
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <router-view></router-view>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer color="indigo" app>
      <span class="white--text">&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      drawer: null
    };
  },
  mounted() {
    if (!this.$store.state.authenticated) {
      this.$router.replace({ name: "login" });
    }
  },
  methods: {
    setAuthenticated(status) {
      this.$store.state.authenticated = status;
    },
    logout() {
      this.$store.state.authenticated = false;
    }
  },
  computed: {
    isAuthenticated() {
      return (
        this.$store.state.authenticated === true
        //this.$route.name !== "login" &&
      );
    },
    navItems() {
      return this.$store.state.navItems;
    }
  },
  props: {
    source: String
  }
};
</script>