<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>
    </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';

    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>
<style>
    /* 중앙 콘텐츠 자동 조정 */
    .layout-page {
        flex-grow: 1;
        min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
        margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
    }

    /* 탑바 범위조정 */
    nav#layout-navbar {
        left: 0 !important;
        margin-right: 20%;
        margin-left: 260px;
        width: auto !important;
        min-width: auto !important;
        right: 26px !important;
        left: 26px !important;
    }

    /* 탑바 범위조정(1200px 이하) */
    @media (max-width: 1200px) {
        nav#layout-navbar {
            left: 0 !important;
            margin-right: 20%;
            margin-left: 0px;
            width: auto !important;
            min-width: auto !important;
            right: 26px !important;
            left: 26px !important;
        }
    }

    /* 탑바 범위조정(992px 이하) */
    @media (max-width: 992px) {
        nav#layout-navbar {
            left: 0 !important;
            margin-right: 20%;
            margin-left: 0px;
            width: auto !important;
            min-width: auto !important;
            right: 26px !important;
            left: 26px !important;
        }
    }
</style>
