ubiquitous-computing-geo-timetracking/frontend/src/App.vue

<template>
  <div class="app">
    <v-app id="geotimetracking">
      <!-- Side navigation menu  -->
      <v-navigation-drawer v-model="drawer" app clipped class="main_accent">
        <v-list dense>
          <v-list-item link to="/">
            <v-list-item-action>
              <v-icon>mdi-view-dashboard</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/timerecords" v-bind:class="{'d-none':!login}">
            <v-list-item-action>
              <v-icon>mdi-clock</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Time Records</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/weeksummary" v-bind:class="{'d-none':!login}">
            <v-list-item-action>
              <v-icon>mdi-chart-bar</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Week Summary</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
          <v-list-item link to="/about">
            <v-list-item-action>
              <v-icon>mdi-information-outline</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>About</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>

      <!-- Top menu bar -->
      <v-app-bar app clipped-left class="main" elevation="10">
        <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
        <v-img src="./assets/logo.svg" max-height="100%" max-width="100" contain></v-img>
        <v-toolbar-title>Geo Timetracking</v-toolbar-title>
        <v-spacer></v-spacer>
        <!-- Menu with account icon -->        
        <v-menu
      v-model="menu"
      :close-on-content-click="false"
      :nudge-width="200"
      offset-y
    >
      <template v-slot:activator="{ on }">
        <v-btn
          icon
          v-on="on"
        >
          <v-icon>mdi-account</v-icon>
        </v-btn>
      </template>

      <v-card>
        <v-list>
          <v-list-item>
            <v-list-item-avatar>
              <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John">
            </v-list-item-avatar>

            <v-list-item-content>
              <v-list-item-title>John Doe</v-list-item-title>
              <v-list-item-subtitle>Admin</v-list-item-subtitle>
            </v-list-item-content>

            <v-list-item-action>
              <v-btn
                :class="fav ? 'red--text' : ''"
                icon
                @click="fav = !fav"
              >
                <v-icon>mdi-heart</v-icon>
              </v-btn>
            </v-list-item-action>
          </v-list-item>
        </v-list>

        <v-divider></v-divider>

        <v-list>
          <v-list-item>
            <v-list-item-action>
              <v-switch v-model="message" color="primary" :input-value="login" @change="login= !login"></v-switch>
            </v-list-item-action>
            <v-list-item-title>View as Guest</v-list-item-title>
          </v-list-item>
        </v-list>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn text @click="menu = false">Cancel</v-btn>
          <v-btn color="primary" text @click="menu = false">Save</v-btn>
        </v-card-actions>
      </v-card>
    </v-menu>
      </v-app-bar>

      <!-- Routed pages are inserted here -->
      <v-content>
        <router-view />
      </v-content>

      <!-- Footer on bottom -->
      <v-footer app class="main">
        <span>&copy; 2020 Team TacocaT</span>
      </v-footer>
    </v-app>
  </div>
</template>

<script>
export default {
  props: {
    source: String
  },
  data: () => ({
    drawer: null,
    login: true
  }),
  created() {
    this.$vuetify.theme.dark = true;
  }
};
</script>


<style scoped>
.link {
  color: #f1f1f1f1;
  text-decoration: none;
}
.v-application {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--v-background-base) !important;
}
</style>