<template>
  <header>
    <img
      class="nav-logo"
      src="@/assets/sebin-smug-icon.png"
      alt="Sebin Avatar"
    />

    <navigation :routes="routes" />
  </header>

  <router-view />
</template>

<script>
import Navigation from "@/components/Navigation.vue";

export default {
  components: { Navigation },
  data() {
    return {
      nsfw: false,
      isConfirmedHorny: false,
      isWarn: false,
      routes: [
        { path: "/", name: "Home" },
        { path: "/general", name: "General" },
        { path: "/anatomy", name: "Anatomy" },
        { path: "/clothing", name: "Clothing" },
        { path: "/abilities", name: "Abilities" },
        { path: "/overdrive", name: "Overdrive" },
      ],
    };
  },
  methods: {
    showWarning() {
      if (!this.isConfirmedHorny) {
        this.isWarn = true;

        setTimeout(() => {
          this.nsfw = false;
        }, 1);
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/scss/base.scss";
@import "~normalize.css";

#app {
  margin: 6em 0 2em 0;
  color: $copy-color;
  font-size: 1.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all ease-in-out 0.25s;

  @media (min-width: 50em) {
    font-size: 1.25em;
  }

  @media (min-width: 125em) {
    font-size: 1.5em;
  }
}

header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;

  position: fixed;
  top: 0;
  right: 0;
  left: 0;

  z-index: 1;

  max-width: 70em;
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);

  background-color: darken($bg-color-dark, 5%);

  @media (min-width: 90em) {
    margin: 1em auto;
  }
}

.nav-logo {
  display: block;
  margin: 0 0 0 0.25em;
  height: 2em;
  border: 0.125em solid #fff;
  border-radius: 100%;
  box-shadow: 0.125em 0.125em 0.5em rgba(0, 0, 0, 0.7);
}
</style>
