<template>
  <div>
    <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
      <v-row>
        <v-col cols="8" class="d-flex justify-start">
          <v-toolbar-title>
            Savvy Firebase
          </v-toolbar-title>
        </v-col>
        <v-col cols="4" class="d-flex justify-end">
          <v-btn color="white">
            Sign In
          </v-btn>
        </v-col>
      </v-row>
    </v-app-bar> -->
    <!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
    <v-app-bar
      flat
      app
      class="hidden-sm-and-down"
      color="#EEEEEE"
      v-if="!this.$store.getters.fullScreen"
    >
      <v-row>
        <v-col cols="2"></v-col>
        <v-col cols="4" class="d-flex justify-start">
          <v-toolbar-title class="appTitle">
            Savvy Firebase Tutorial
          </v-toolbar-title>
        </v-col>
        <v-col cols="4" class="d-flex justify-end align-self-center">
          <router-link :to="{ name: 'Login' }" class="routerLink">
            <span class="mr-3">Sign In</span>
          </router-link>
          <span class="mr-3">Register</span>
        </v-col>
        <v-col cols="2"></v-col>
      </v-row>
    </v-app-bar>
  </div>
</template>

<script>
export default {
  name: "Appbar"
};
</script>

<style lang="scss" scoped>
.appTitle {
  font-family: $gilroy-bold;
}

.routerLink {
  text-decoration: none;
  color: $mainColor
}
</style>
