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

<template>
  <div class="panel">
    <p class="panel-heading is-unselectable" @click="is_open = !is_open">
      <span class="icon-text">
        <span class="icon">
          <font-awesome-icon
            :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
          />
        </span>
        <span v-if="header !== ''">{{ header }}</span>
      </span>
    </p>
    <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 scoped>
div.panel > .panel-heading {
  cursor: pointer;
}
</style>