96 lines
2.7 KiB
Vue
96 lines
2.7 KiB
Vue
<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>
|