<template>
  <div class="container">
    <SiderBar v-if="menuItems?.length  > 0" :menuItems="menuItems"  />
    <!-- <el-main class="main_container"> -->
    <router-view></router-view>
    <!-- </el-main> -->
  </div>
</template>

<script>
import SiderBar from './SiderBar.vue'

export default {
  components: {
    SiderBar,
  },
  props:{
    menuItems:Array
  },
}
</script>

<style scoped lang="scss">
.container {
    /* border:solid blue 2px; */
    flex: 1 1;
    overflow: auto;
    position: relative;
    box-sizing: border-box;
    max-width: 100vw;
    width: 100%;
    display: flex;
    justify-content: flex-start;

  .main_container {
    /* border:solid blue 2px; */

    position: relative;
    flex: 1 1;
    padding: 20px;
    background: #F0F4FB;
    height: 100%;
    overflow:auto;
  }
}

</style>