<template>
  <div id="app">
    <Navbar></Navbar>
    <BusyBar></BusyBar>
    <transition
      mode="out-in"
      enter-active-class="animate__animated animate__fadeInRight animate__faster"
      leave-active-class="animate__animated animate__fadeOutLeft animate__faster"
    >
      <router-view />
    </transition>
    <Footer></Footer>
  </div>
</template>

<script>
import BusyBar from "@/components/BusyBar.vue";
import Navbar from "@/components/Navbar.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "App",
  components: {
    BusyBar,
    Navbar,
    Footer
  }
};
</script>

<style lang="scss">
@charset "utf-8";
$modal-background-background-color: hsla(0, 0%, 4%, 0.2);
@import "../node_modules/bulma/bulma.sass";
</style>
