<template>
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- menu -->
            <TheMenu />
            <!-- Layout container -->
            <div class="layout-page">
                <!-- Top -->
                <TheTop />

                <!-- Content -->
                <div class="content-wrapper">
                    <slot name="content"> body </slot>
                    <TheFooter />
                    <div class="content-backdrop fade"></div>
                </div>
            </div>
            <TheChat />
        </div>

        <!-- Overlay -->
        <div class="layout-overlay layout-menu-toggle"></div>

        <!-- Drag Target Area To SlideIn Menu On Small Screens -->
        <div class="drag-target"></div>

        <ScrollTopButton />
    </div>
</template>
<script setup>
    import TheTop from './TheTop.vue';
    import TheFooter from './TheFooter.vue';
    import TheMenu from './TheMenu.vue';
    import TheChat from './TheChat.vue';
    import { nextTick } from 'vue';
    import { wait } from '@/common/utils';
    import ScrollTopButton from '@c/button/ScrollTopButton.vue';

    window.isDarkStyle = window.Helpers.isDarkStyle();

    const loadScript = src => {
        const script = document.createElement('script');
        script.src = src;
        script.type = 'text/javascript';
        script.async = true;
        document.body.appendChild(script);
    };
    nextTick(async () => {
        await wait(200);
        loadScript('/vendor/js/menu.js');
        loadScript('/js/main.js');
    });
</script>
