site_logiciels/pages/test.vue

<template>
  <v-app>
    <v-app-bar-nav-icon @click="drawer = true"> </v-app-bar-nav-icon>

    <v-navigation-drawer v-model="drawer" app>
      <v-list nav dense>
        <v-list-item v-for="(item, index) in items" :key="item">
          <v-list-item-title @click="selectMenu(item)">
            {{ item }}
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- Tiroir de navigation pour les sous-menus -->
    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
      <v-list nav dense>
        <!-- Bouton de retour -->
        <v-list-item @click="closeSubMenu">
          <v-list-item-title>Retour</v-list-item-title>
        </v-list-item>

        <!-- Éléments du sous-menu -->
        <v-list-item
          v-for="(subItem, subIndex) in subMenus[currentMenu]"
          :key="subIndex"
        >
          <v-list-item-title>{{ subItem }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- Contenu principal -->
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      subMenuDrawer: false, // État du tiroir de navigation des sous-menus
      currentMenu: "",
      items: ["web", "shopping", "videos", "images", "news"],
      subMenus: {
        web: ["Sous-menu Web 1", "Sous-menu Web 2"],
        shopping: ["Sous-menu Shopping 1", "Sous-menu Shopping 2"],
        // Ajoutez d'autres sous-menus ici
      },
    };
  },
  methods: {
    selectMenu(item) {
      this.currentMenu = item;
      // fermes le tiroir de navigation principal
      this.drawer = false;
      this.subMenuDrawer = true; 
    },
    closeSubMenu() {
      this.subMenuDrawer = false;
      this.drawer = true;
    },
  },
};
</script>

<style scoped>
.nav-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
</style>