<template>
  <base-card class="rel hidden-overflow">
    <div class="flex flex-row flex-nowrap aside-content-container" :style="{ height: height[sizeHeight] }">
      <aside v-show="showAside" class="flex flex-column flex-nowrap flex-start background-white right-border-gray" style="z-index:0">
        <div v-if="$slots.asideHeader" class="full-width">
          <slot name="asideHeader"></slot>
        </div>
        <div class="flex-1 full-width auto-overflow">
          <slot name="aside"></slot>
        </div>
        <div v-if="$slots.asideFooter" class="full-width">
          <slot name="asideFooter"></slot>
        </div>
      </aside>
      <div :class="['flex flex-column flex-nowrap flex-start flex-1 background-white rel', {'aside-content-left':showAside}]">
        <div class="full-width flex flex-row flex-nowrap middle-xs padding-x-small">
          <div class="flex-auto">
            <base-button size="large" square apperance="white" @click.native="onClickAside">
              <template #icon>
                <i :class="['fas fa-bars', {'hidden-md-down':showAside}]"></i>
                <i v-show="showAside" class="fas fa-times hidden-md-up"></i>
              </template>
            </base-button>
          </div>
          <span class="visible-block text-large text-dark text-bold text-ellipsis">{{ title }}</span>
        </div>
        <div class="flex-1 full-width auto-overflow bottom-padding-large horizontal-padding-large">
          <slot></slot>
        </div>
      </div>
    </div>
  </base-card>
</template>

<style scoped src="./styles.css" /></style>
<script src="./scripts.js"></script>
