<template>
  <div>
    <Header>
      <HeaderLeft>
      </HeaderLeft>
      <HeaderMiddle>
        <p>Yuika Documentation</p>
      </HeaderMiddle>
      <HeaderRight>
        <NavigationBar>
          <NavigationItem>
            <a href="/">Home</a>
          </NavigationItem>
          <NavigationItem>
            <a href="/">Home</a>
          </NavigationItem>
        </NavigationBar>
      </HeaderRight>
    </Header>
    <div>
      <Content/>
    </div>
  </div>
</template>
<script>
import { Header, HeaderLeft, HeaderMiddle, HeaderRight } from "../../../src/components/Header";
import { NavigationBar, NavigationItem } from "../../../src/components/Navigation";

export default {
  components: {
    Header, HeaderLeft, HeaderMiddle, HeaderRight,
    NavigationBar, NavigationItem,
  }
}
</script>
<style>
  @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap');
  @import "./../../../src/assets/css/tailwind.css";

  body {
    @apply m-0 font-sans;
  }
</style>
