app/components/Layout/Parameters/Menu.vue

<template>
  <v-navigation-drawer
    v-model="displayMenu"
    :rail="isRail"
    :disable-resize-watcher="true"
    mobile-breakpoint="sm"
    class="parameters-menu theme-neutral-very-soft"
  >
    <!--
    Le z-index est précisé pour éviter cette erreur : https://github.com/vuetifyjs/nuxt-module/issues/205
    Il pourra être retiré dès que le bug aura été corrigé
    -->
    <template #prepend>
      <div v-if="!isRail" class="title">
        <v-btn
          flat
          :title="$t('go_back_home')"
          :href="homeUrl"
          icon="fa fa-arrow-left"
          class="mr-1"
        />
        <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"
        @click="onItemClicked"
      />
    </v-list>
  </v-navigation-drawer>
</template>

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

const { mdAndUp, lgAndUp } = useDisplay()

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

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

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

// En vue lg+, on affiche toujours le menu
const displayMenu = computed(() => {
  return (
    menu !== null && hasMenu('Parameters') && (lgAndUp.value || isOpened.value)
  )
})

// En vue md+, fermer le menu le passe simplement en mode rail
// Sinon, le fermer le masque complètement
const isRail = computed(() => {
  return menu !== null && mdAndUp.value && !isOpened.value
})

const onItemClicked = () => {
  if (!lgAndUp.value) {
    closeMenu('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 (import.meta.client && menu !== null) {
    setMenuState('Parameters', mdAndUp.value)
  }
})

const { homeUrl } = useHomeUrl()

onUnmounted(() => {
  unwatch()
})

// TODO voir à factoriser avec LayoutMainMenu
</script>

<style scoped lang="scss">
.parameters-menu {
  position: relative;
  overflow: hidden;
}

.parameters-menu::before {
  content: '\f013';
  font-family: 'Font Awesome 6 Free', serif;
  font-weight: 900;
  font-size: 300px;
  color: rgb(var(--v-theme-neutral-soft));
  position: absolute;
  top: 90%;
  left: 12%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  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;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 32px;

  .v-list-item__spacer {
    display: none;
  }
}

:deep(.v-list-item .v-icon) {
  max-width: 24px;
  margin-right: 10px;
}
</style>