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="ot-light-grey">
      <template v-slot:default="{ expanded }">
        <v-icon class="text-ot-white bg-ot-green 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--active > .v-expansion-panel-header{
    min-height: 47px;
  }

  .v-expansion-panel-title {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 47px;
    min-height: 47px;
  }

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

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