<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>
        </div>

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

        <!-- Drag Target Area To SlideIn Menu On Small Screens -->
        <div class="drag-target"></div>
    </div>
</template>
<script setup>
import TheTop from './TheTop.vue';
import TheFooter from './TheFooter.vue';
import TheMenu from './TheMenu.vue';
import { nextTick } from '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);
    script.onload = () => {
        console.log(`${src} loaded successfully.`);
    };
    script.onerror = () => {
        console.error(`Failed to load script: ${src}`);
    };
};
nextTick(() => {
    loadScript('/vendor/js/menu.js');
    loadScript('/js/main.js');
});
</script>
<style>
</style>
