advent22/ui/src/components/bulma/Drawer.vue

<template>
  <div class="card">
    <header
      class="card-header has-background-grey-lighter is-unselectable"
      @click="is_open = !is_open"
    >
      <p class="card-header-title">{{ header }}</p>
      <button class="card-header-icon">
        <span class="icon">
          <font-awesome-icon
            :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
          />
        </span>
      </button>
    </header>

    <slot v-if="is_open" name="default" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    header: {
      type: String,
      required: false,
      default: "",
    },
  },
})
export default class extends Vue {
  public is_open = false;
  public header!: string;
}
</script>

<style lang="scss" scoped>
div.card {
  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  > .card-header {
    cursor: pointer;
  }
}
</style>