<template>
  <div class="page-layout">
    <div class="page-layout-left">
      <page-menu :menus="menus" />
    </div>
    <div class="page-layout-main">
      <slot></slot>
    </div>
  </div>
</template>
<script setup name="page-layout">
const props = defineProps({
  menus: { type: Array, default: () => [] },
  showMenu: {
    type: Boolean,
    default: true,
  },
});
</script>
<style lang="scss" scoped>
.page-layout {
  width: $width-main;
  margin: 0 auto;
  height: 100%;
  min-height: calc(100vh - 230px);
  @include flex-row();

  &-left,
  &-main {
    height: 100%;
    min-height: 100%;

    border-radius: 8px;
    padding: 8px;
    overflow-y: auto;
  }
  &-left {
    width: 240px;
    margin-right: 16px;
    background: $color-fff;
  }
  &-main {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }
}
</style>
