<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <img alt="logo" class="logo" src="@/assets/imgs/logo.png" width="125" height="125">

    <nav>
      <RouterLink to="/">
        首页
      </RouterLink>
      <RouterLink to="/docs">
        文档
      </RouterLink>
    </nav>
  </header>

  <RouterView />
</template>


<style scoped>
header {
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -220px;
  z-index: 10;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
  border-radius: 20px;
}

nav {
  width: 100%;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 10px;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}
</style>
