<template>
  <v-app-bar elevation="0" color="#121212" height="70" fixed>
    <v-container>
      <v-row>
        <v-col class="w-full d-flex">
          <nuxt-link
            :to="{ name: 'index' }"
            class="text--primary text-h4 text-decoration-none"
            :class="{
              'mt-5': $vuetify.breakpoint.mdAndDown,
              'mt-4': !$vuetify.breakpoint.mdAndDown,
            }"
          >
            <v-avatar v-if="$vuetify.breakpoint.lgAndUp" tile size="30">
              <v-img contain :src="require('@/assets/img/logo.svg')"></v-img>
            </v-avatar>
            HTTP SMS
          </nuxt-link>
          <v-spacer></v-spacer>
          <v-btn
            exact-path
            class="primary mt-5 mb-5"
            :large="$vuetify.breakpoint.lgAndUp"
            :to="{ name: 'login' }"
          >
            Get Started
            <span v-if="$vuetify.breakpoint.lgAndUp">&nbsp;For Free</span>
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-app-bar>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class FixedHeader extends Vue {}
</script>
