<template>
  <header>
    <img
      alt="Vue logo"
      class="logo"
      src="/assets/logo.svg"
      width="125"
      height="125"
    />

    <div class="wrapper">
      <Hello msg="It works!!!" />

      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </div>
  </header>

  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
import Hello from './components/hello.vue'

export default {
  components: { Hello }
}
</script>

<style>
#app {
  padding: 32px;
}
</style>

<style lang="scss" scoped>
header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--color-teal-1);
  transition: 0.2s;
}

a:hover {
  color: var(--color-teal-3);
}

nav {
  margin-top: 32px;
  display: flex;
  justify-content: center;

  a {
    margin: 0 16px;
    color: var(--color-dark-1);
  }

  .router-link-active {
    text-decoration: none;
    color: var(--color-teal-1);
    cursor: default;
  }
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 32px;
  text-align: center;
}
</style>
