<template>
  <div>
    <v-app-bar
      flat
      app
      hide-on-scroll
      color="rgba(93.3%, 93.3%, 93.3%, 0.5)"
      v-if="!this.$store.getters.fullScreen"
    >
      <v-row>
        <v-spacer></v-spacer>
        <v-col
          cols="4"
          class="d-flex justify-start align-center align-content-center"
        >
          <router-link :to="{ name: 'Home' }" class="routerLink">
            <v-toolbar-title class="title">
              <p class="mb-0">Savvy Firebase Tutorial</p>
            </v-toolbar-title>
          </router-link>
        </v-col>
        <v-col cols="4" class="d-flex justify-end">
          <vsm-menu
            ref="header"
            :menu="menu"
            :screen-offset="250"
            :base-width="380"
            :base-height="400"
          >
            <template #default="data">
              <component :is="data.item.content" class="content" />
              <component :is="data.item.secondary" class="content--secondary" />
            </template>
          </vsm-menu>
        </v-col>
        <v-spacer></v-spacer>
      </v-row>
    </v-app-bar>
  </div>
</template>

<script>
import Welcome from "../views/stripe-appbar/Welcome";
import WelcomeSecondary from "../views/stripe-appbar/WelcomeSecondary";
import Random from "../views/stripe-appbar/Random";

export default {
  name: "Appbar",
  data() {
    return {
      menu: [
        {
          title: "Welcome",
          dropdown: "welcome",
          content: Welcome,
          secondary: WelcomeSecondary
        },
        {
          title: "Random",
          dropdown: "random",
          content: Random
        }
      ]
    };
  },
  methods: {
    onOpenDropdown() {
      console.log("onOpenDropdown");
    },
    onCloseDropdown() {
      console.log("onCloseDropdown");
    }
  }
};
</script>

<style lang="scss" scoped>
.routerLink {
  text-decoration: none;
  color: $mainColor;
}
.underline {
  position: relative;
}
.underline::after {
  position: absolute;
  content: "";
  height: 0.1em;
  top: 100%;
  background: currentColor;
  z-index: -1;
  left: 0;
  right: 0;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.95, 0.05, 0.795, 0.035) 50ms;
}
.underline:hover::after {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transform: scaleX(1);
}
</style>
