site_logiciels/pages/mobile.vue

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

      <v-btn icon>
        <v-icon>mdi-bell</v-icon>
      </v-btn>

    </v-app-bar>

    <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>

    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
      <v-list nav dense>
        <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>

  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      subMenuDrawer: false,
      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"],
      },
    };
  },
  methods: {
    selectMenu(item) {
      this.currentMenu = item;
      this.subMenuDrawer = true; 
      this.drawer = false;
    },
  },
};
</script>