<template>
  <div class="MainLayout zpa-column" :class="classes">
    <div class="MainHeader zpa-row">
      <slot name="header"></slot>
    </div>
    <div class="zpa-row" style="overflow: hidden;">
      <div class="MainAside">
        <slot name="menu"></slot>
      </div>
      <div class="MainContent zpa-column">
        <slot name="content"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MainLayout',

  props: {
    theme: String,
  },

  computed: {
    classes () {
      if (!this.theme) return {}

      return {
        [this.theme]: true,
      }
    },
  },
}
</script>

<style scoped lang="less">
.MainLayout {
  .MainHeader,
  .MainAside {
    flex: none;
    background: #263238;
    color: #fff;
  }
  .MainAside {
    overflow-y: auto;
  }
  .MainContent {
    box-shadow: 0 4px 10px #9997 inset;
    background: #F5F6FA;
    overflow: hidden;
    padding: 8px;
  }

  &.blue {
    .MainHeader {
      background: #238ce4;
    }
  }

  &.green {
    .MainHeader {
      background: #179989;
    }
  }

  &.red {
    .MainHeader {
      background: #a72a30;
    }
  }

  &.yellow {
    .MainHeader {
      background: #ffc107;
    }
  }
}
</style>
