<template>
  <div class="bg-background-dark min-h-screen overscroll-none">
    <!-- App header -->
    <AppHeader/>

    <!-- Render contents with transition -->
    <transition name="fade" mode="out-in">
      <Nuxt/>
    </transition>

    <!-- Go back to top when scrolled down -->
    <SideBar/>
  </div>
</template>

<script>
import feather from "feather-icons";
import smoothscroll from 'smoothscroll-polyfill';

if (process.browser) {
  smoothscroll.polyfill();
}

import AppBanner from "@/components/shared/AppBanner.vue";
import AppHeader from "../components/shared/AppHeader.vue";

export default {
  components: {AppBanner, AppHeader},
  data: () => {
    return {};
  },

  computed: {},

  async mounted() {
    // feather.replace();
    try {
      await this.$recaptcha.init()
    } catch (e) {
      console.error(e);
    }
  },
};
</script>

<style scoped>


@keyframes going {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-10px);
    opacity: 0;
  }
}

@keyframes coming {
  from {
    transform: translateX(-10px);
    opacity: 0;
  }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
</style>
