<template>
  <div id="app">
    <userHeader :setUserInfo="setUserInfo"></userHeader>
    <main class="main">
      <!-- route outlet -->
      <router-view :userInfo="userInfo"></router-view>
    </main>
  </div>
</template>

<script>
import { getBlogs } from "./api";
import HelloWorld from "./components/HelloWorld.vue";
import userHeader from "./components/user-header.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    userHeader,
  },
  data() {
    return {
      userInfo: {},
    };
  },
  watch: {
    $route(to, from) {
      this.$nextTick(() => {
        this.isAdmin = this.$route.path.indexOf("/admin") > -1;
      });
    },
  },
  async mounted() {
    this.$nextTick(() => {
      this.isAdmin = this.$route.path.indexOf("/admin") > -1;
    });
  },
  methods: {
    setUserInfo(value) {
      this.userInfo = value;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  /*margin-top: 60px;*/
}
.main {
  margin-top: 66.5px;
  /*margin-top: 200px;*/
}
</style>
