<template>
<div>
  <header>
      <div class="header-left">
          <nuxt-link to="/"><p class="header-link">Damillora</p></nuxt-link>
      </div>
      <div class="header-middle">
      </div>
      <div class="header-right">
          <nuxt-link to="/projects"><p class="header-link">Projects</p></nuxt-link>
      </div>
  </header>
  <div class="h-16"></div>
</div>
</template>

<script>
export default {

}
</script>

<style>
header {
    @apply h-16 fixed top-0 w-full z-10 flex flex-row justify-start items-center px-4;
    background-color: rgba(0,0,0,0.3);
}
.header-link {
    @apply text-white text-lg;
}
.header-left {
    
}
.header-middle {
    @apply flex-grow;
}
.header-right {
    
}
</style>
