app/components/Layout/ParametersMenu.vue

<template>
  <v-navigation-drawer v-if="displayMenu" v-model="isOpened" mobile-breakpoint="sm">
    <template v-slot:prepend>
      <div class="title">
        <h3>{{ $t('parameters') }}</h3>
      </div>
    </template>

    <v-list active-class="active">
      <v-list-item
          v-for="(item, i) in menu!!.children"
          :key="i"
          :title="$t(item.label)"
          :prepend-icon="item.icon ? item.icon.name : ''"
          :to="(item as MenuItem).to">
      </v-list-item>
    </v-list>

    <template v-slot:append>
      <v-btn
          :href="homeUrl"
          prepend-icon="fa fa-right-from-bracket"
          :flat="true"
          color="on-neutral-very-soft"
          class="cancel-btn py-2"
      >
        {{ $t('exit') }}
      </v-btn>
    </template>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
  import {useMenu} from "~/composables/layout/useMenu";
  import {useHomeUrl} from "~/composables/utils/useHomeUrl";
  import {useDisplay} from "vuetify";
  import {computed} from "@vue/reactivity";
  import type {MenuGroup, MenuItem} from "~/types/layout";

  const { mdAndUp } = useDisplay()

  const { getMenu, hasMenu, isMenuOpened, setMenuState } = useMenu()

  const menu: MenuGroup | null = getMenu('Parameters')

  const displayMenu = computed(() => {
    return menu !== null && hasMenu('Parameters')
  })

  const isOpened = computed(() => isMenuOpened('Parameters'))

  const unwatch = watch(mdAndUp, () => {
    // Par défaut si l'écran est trop petit au chargement de la page, le menu doit rester fermé.
    if (process.client && menu !== null) {
      setMenuState('Parameters', mdAndUp.value)
    }
  })

  const { homeUrl } = useHomeUrl()

  onUnmounted(() => {
    unwatch()
  })
</script>

<style scoped lang="scss">
  .title {
    display: flex;
    align-items: center;
    height: 48px;
    vertical-align: center;
    margin-top: 18px;
    padding: 4px 16px;
    font-size: 18px;
    color: rgb(var(--v-theme-on-neutral-very-soft));
  }

  .v-navigation-drawer {
    background-color: rgb(var(--v-theme-neutral-very-soft));
    border-right: solid 1px rgb(var(--v-theme-neutral-strong));
  }

  :deep(.v-list-item-title), :deep(.v-icon)
  {
    font-size: 14px;
    color: rgb(var(--v-theme-on-neutral-very-soft));
  }

  .v-list-item:hover,
  .v-list-item.active,
  :deep(.v-list-group__items .v-list-item)
  {
    background-color: rgb(var(--v-theme-neutral)) !important;
    color: rgb(var(--v-theme-on-secondary-alt)) !important;
  }

  :deep(.v-list-item.active .v-list-item-title) {
    font-weight: 800 !important;
  }

  :deep(.v-list-item-title), :deep(.v-icon)
  {
    font-size: 14px;
    color: rgb(var(--v-theme-on-neutral-very-soft));
  }

  :deep(.v-list-item__prepend) {
    margin: 10px 0;
    margin-right: 10px !important;
  }

  :deep(.v-list-item .v-icon) {
    margin-right: 10px;
  }

  .cancel-btn {
    height: 42px;
    color: rgb(var(--v-theme-on-neutral-very-soft));
    background-color: transparent;
    width: 100%;
    border-top: solid 1px rgb(var(--v-theme-on-neutral-very-soft));
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  :deep(.cancel-btn .v-btn__prepend) {
    margin: 0 16px 4px 2px;
  }

</style>