<template>
  <header
    id="header"
    class="fixed top-0 left-0 w-screen bg-white h-16 px-4 py-3 shadow-md flex items-center justify-between"
  >
    <router-link to="/" class="flex w-auto h-full items-center">
      <img
        class="h-full mr-4"
        src="https://avatars2.githubusercontent.com/u/1080062?s=200&v=4"
        alt="PeopleDoc - Icon"
      />
      <h1 class="text-2xl font-light tracking-wide">PeopleDoc</h1>
    </router-link>
    <h2 class="font-medium hidden sm:block">{{ description }}</h2>
  </header>
</template>

<script>
import pkg from "@/package.json";

export default {
  name: "Header",
  computed: {
    description: function() {
      return pkg.description;
    }
  }
};
</script>

<style></style>
