koel/resources/assets/js/components/layout/main-wrapper/index.vue
2022-04-24 11:29:14 +03:00

26 lines
821 B
Vue

<template>
<div id="mainWrapper">
<Sidebar/>
<MainContent/>
<ExtraPanel/>
<ModalWrapper/>
</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from 'vue'
const Sidebar = defineAsyncComponent(() => import('@/components/layout/main-wrapper/Sidebar.vue'))
const MainContent = defineAsyncComponent(() => import('@/components/layout/main-wrapper/MainContent.vue'))
const ExtraPanel = defineAsyncComponent(() => import('@/components/layout/main-wrapper/ExtraPanel.vue'))
const ModalWrapper = defineAsyncComponent(() => import('@/components/layout/ModalWrapper.vue'))
</script>
<style lang="scss">
#mainWrapper {
display: flex;
flex: 1;
height: 0; // fix a flex-box bug https://github.com/philipwalton/flexbugs/issues/197#issuecomment-378908438
overflow: hidden;
}
</style>