<template>
  <!-- <v-container class="pb-0"> -->
  <div>
    <v-app-bar flat color="indigo" app class="hidden-md-and-up">
      <v-row>
        <v-col cols="8" class="appTitle 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="primary">
            Sign In
          </v-btn>
        </v-col>
        <!-- <v-col>
          <v-btn color="primary">
            Register
          </v-btn>
        </v-col> -->
      </v-row>
    </v-app-bar>
    <v-app-bar
      flat
      app
      class="hidden-sm-and-down"
      src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
        ></v-img>
      </template>
      <v-row>
        <v-col cols="2"></v-col>
        <v-col cols="4" class="appTitle d-flex justify-start">
          <v-toolbar-title>
            Savvy Firebase Tutorial
          </v-toolbar-title>
        </v-col>
        <v-col>
          <v-spacer> </v-spacer>
        </v-col>
        <v-col cols="2">
          <v-btn color="primary" class="mr-2">
            Sign In
          </v-btn>
          <v-btn color="primary">
            Register
          </v-btn>
        </v-col>
      </v-row>
    </v-app-bar>
    <!-- </v-container> -->
  </div>
</template>

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

<style lang="scss" scoped>
.appTitle {
  color: white;
}
</style>
