<template>
  <div class="drawer-container" :style="{ width: width }">
    <div class="drawer-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Drawer",
  props: {
    title: {
      type: String,
      default: ''
    },
    inner: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '800px'
    },
    mask: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isOpen: true
    };
  }
};
</script>

<style lang="scss" scoped>
.drawer-container {
  position: relative;
  height: 100%;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  flex-shrink: 0;

  .drawer-content {
    padding: 20px;
    min-height: 100%;
  }
}
</style>
