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) {
  max-width: 24px;
  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>