app/components/Ui/ExpansionPanel.vue

<!--
Panneaux déroulants de type "accordéon"

@see https://vuetifyjs.com/en/components/expansion-panels/
-->

<template>
  <v-expansion-panel :id="id">
    <v-expansion-panel-header color="ot-light_grey">
      <v-icon class="ot-white--text ot-green icon">
        {{ icon }}
      </v-icon>
      {{ $t(id) }}
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <slot />
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

<script setup lang="ts">
const props = defineProps({
  id: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: false,
    default: null
  }
})
</script>

<style scoped>
  .icon{
    width: 47px;
    height: 47px;
    padding: 10px;
    margin-right: 10px;
    flex: none !important;
  }
  .v-expansion-panel-header{
    padding: 0;
    padding-right: 20px;
  }
  .v-expansion-panel--active > .v-expansion-panel-header{
    min-height: 47px;
  }
</style>