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

<template>
  <header>
    <router-link to="/">
      <img src="/nwslogo.gif" width="38" height="38" />
      <h5 class="is-size-5 has-text-weight-bold">Weather</h5>
    </router-link>

  </header>

  <div style="padding: 0.5rem;">
    <router-view v-slot="{Component}">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<style scoped>

header {
    background-color: #5e87b0;
    padding: 0.5rem;
}

header a {
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

</style>
