<template>
<v-app>
    <div class="wrapper RTL">
        <HeaderBG></HeaderBG>
        <div id="app">
            <Nav></Nav>
            <div class="container-fluid">
                <router-view></router-view>
            </div>
        </div>
        <Footer></Footer>
        <Loading v-if="loadingVisible"></Loading>
    </div>
</v-app>
</template>

<script>
import Nav from "@Global/components/Body/Header/Nav.vue";
import Loading from "@Global/components/Misc/Loading.vue";
import HeaderBG from "@Global/components/Body/Header/HeaderBG.vue";
import Footer from "@Global/components/Body/Footer.vue";

export default {
    data: () => {
        return {
            loadingVisible: false
        };
    },

    components: {
        Nav,
        HeaderBG,
        Footer,
        Loading
    }
};
</script>

<style lang="scss">
#app {
    padding: 2em 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>
