habitica/website/client/components/ui/drawer.vue

<template lang="pug">
.drawer-container
  .drawer-title(@click="open = !open")
    | {{title}}
    .drawer-toggle-icon.svg-icon.icon-10(v-html="open ? icons.minimize : icons.expand", :class="{ closed: !open }")
  transition(name="slide-up", @afterLeave="adjustPagePadding", @afterEnter="adjustPagePadding")
    .drawer-content(v-show="open")
      slot(name="drawer-header")
      .drawer-slider
        slot(name="drawer-slider")
        div.message(v-if="errorMessage != null")
          .content {{ errorMessage }}
</template>

<style lang="scss">
@import '~client/assets/scss/colors.scss';

.drawer-container {
  z-index: 19;
  position: fixed;
  font-size: 12px;
  font-weight: bold;
  bottom: 0;
  left: 19%;
  right: 3%;
  max-width: 80%;

  @media screen and (min-width: 1241px) {
    max-width: 968px;
    // 16.67% is the width of the .col-2 sidebar
    left: calc((100% + 16.67% - 968px) / 2);
    right: 0%;
  }
}

.drawer-toggle-icon {
  float: right;
  margin-right: 16px;
  margin-top: 16px;

  &.closed {
    margin-top: 3px;
  }
}

.drawer-title {
  background-color: $gray-10;
  box-shadow: 0 1px 2px 0 rgba($black, 0.2);
  cursor: pointer;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  text-align: center;
  line-height: 1.67;
  color: $white;
  padding: 6px 0;
}

.drawer-content {
  line-height: 1.33;
  max-height: 300px;
  background-color: $gray-50;
  color: $gray-500;
  box-shadow: 0 2px 16px 0 rgba($black, 0.3);
  padding-top: 6px;
  padding-left: 24px;
  padding-right: 24px;
}

.drawer-tab {
  &-container {
    display: flex;
    margin-left: 24px;

    & > div {
      flex: 1;
    }
  }

  &-text {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.67;
    text-align: center;
    color: $white;
    border-bottom: 2px solid transparent;
    padding: 0px 8px 8px 8px;

    &-active {
      border-color: $purple-400;
    }
  }
}

.drawer-slider {
  padding: 12px 0 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  position: relative;

  & .message {
    display: flex;
    align-items: center;
    justify-content: center;

    top: calc(50% - 30px);
    left: 24px;
    right: 0;
    position: absolute;

    & .content {
      background-color: rgba($gray-200, 0.5);
      border-radius: 8px;
      padding: 12px;
    }
  }
}

.slide-up-enter-active, .slide-up-leave-active {
  transition-property: all;
  transition-duration: 450ms;
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.slide-up-enter, .slide-up-leave-to {
  max-height: 0;
}
</style>

<script>
import expandIcon from 'assets/svg/expand.svg';
import minimizeIcon from 'assets/svg/minimize.svg';

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    errorMessage: {
      type: String,
    },
  },
  data () {
    return {
      open: true,
      icons: Object.freeze({
        expand: expandIcon,
        minimize: minimizeIcon,
      }),
    };
  },
  methods: {
    adjustPagePadding () {
      let minPaddingBottom = 20;
      let drawerHeight = this.$el.offsetHeight;
      let standardPage = document.getElementsByClassName('standard-page')[0];
      standardPage.style.paddingBottom = `${drawerHeight + minPaddingBottom}px`;
    },
  },
  mounted () {
    // Make sure the page has enough space so the drawer does not overlap content
    this.adjustPagePadding();
  },
};
</script>