app/components/Ui/ExpansionPanel.vue

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

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

<template>
  <v-expansion-panel :value="title">
    <v-expansion-panel-title color="neutral">
      <template v-slot:default="{ expanded }">
        <v-icon class="theme-primary icon">
          {{ icon }}
        </v-icon>
        {{ $t(title) }}
      </template>
    </v-expansion-panel-title>

    <v-expansion-panel-text>
      <slot />
    </v-expansion-panel-text>
  </v-expansion-panel>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    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-title {
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 47px;
  min-height: 47px;
}

.v-expansion-panel--active > .v-expansion-panel-title {
  min-height: 47px !important;
}

:deep(.v-expansion-panel-title__icon > .v-icon) {
  font-size: 16px;
}

.icon {
  text-align: center;
}
</style>