feat: menu sections on the right for class/tuto

IFB-ElixirFr · Aug 11, 2023 · 5ca8eb5 · 5ca8eb5
1 parent a638bc5
commit 5ca8eb5
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 28 deletions.
diff --git a/pages/[lang]/[...slug].vue b/pages/[lang]/[...slug].vue
@@ -28,30 +28,44 @@
             <v-btn class="bg-primary rounded-pill lighten-4 mx-4"
               variant="Flat"
               href="https://github.com/IFB-ElixirFr/Wasm4Learn/discussions"
-              target="_blank">Help</v-btn>
+              target="_blank">Help
+            </v-btn>
 
-
-        <v-menu
-          open-on-hover
-          >
-            <template v-slot:activator="{ props }">
-              <v-btn
+            <v-btn
+              @click.stop="drawer = !drawer"
               class="rounded-pill"
               variant="tonal"
-              > {{ step + 1 }} / {{ tutosList.length }} </v-btn>
-            </template>
-            <v-list>
-              <v-list-item v-for="(n, key) in navigation" :key="key">
-              </v-list-item>  
-              <v-list-item-title>{{ c2.title }}</v-list-item-title> 
-            </v-list>
+              > {{ step + 1 }} / {{ tutosList.length }}
+            </v-btn>
 
-          </v-menu>
-            <!-- <v-btn
-              @click="menuDisplay"
-              class="rounded-pill"
-              variant="tonal"
-              > {{ step + 1 }} / {{ tutosList.length }} </v-btn> -->
+          <v-navigation-drawer v-model="drawer" absolute temporary>
+            <div v-for="(n, key) in navigation" :key="key">
+              <v-list-item
+              @click="changePath(section._path, c._dir)"
+              v-for="(s, Sectionkey) in n.children" :key="Sectionkey">
+                <v-list-item-content
+                v-for="(section, Skey) in s.children" :key="Skey">
+                <v-divider></v-divider>
+                <v-list-item-title>
+                  {{ section.title }}</v-list-item-title>
+                  <v-list-item-title
+                  v-for="(n, nkey) in section.children" :key="nkey">
+                  {{ n.title }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+              <v-divider></v-divider>
+              <!-- <v-list dense nav>
+                <v-list-item>
+                  <v-list-item-content>
+                    <v-list-item-title
+                    v-for="(n, nkey) in section.children" :key="nkey"
+                    class="text-h6"
+                    >{{ n.title }}</v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list> -->
+            </div>
+            </v-navigation-drawer>
 
         </v-card-actions>
 
@@ -152,6 +166,7 @@ export default {
       pyodideLoaded: false,
       canvasArray: [],
       canvasPos: 0,
+      drawer: null,
     };
   },
   async setup() {
@@ -217,7 +232,14 @@ export default {
       }
     }
 
+    const contentFolder = await queryContent("/" + lang).find();
+    const { data: navigation } = await useAsyncData("navigation", () =>
+      fetchContentNavigation("/" + lang)
+    );
+
     return {
+      contentFolder,
+      navigation,
       webConsole,
       tutosList,
       store,
@@ -256,6 +278,10 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
     });
   },
   methods: {
+    changePath(pathParent, id) {
+      const router = useRouter();
+      router.push({ path: pathParent + "/", query: { id: id } });
+    },
     changePlot(direction) {
       this.updateCanvas();
       if (direction == "next" && this.canvasPos + 1 < this.canvasArray.length) {

diff --git a/pages/[lang]/index.vue b/pages/[lang]/index.vue
@@ -12,12 +12,10 @@
           v-for="(c, keyC) in section.children"
           :key="keyC"
           width="350px"
-          class="ma-5 rounded-xl"
-        >
+          class="ma-5 rounded-xl">
         <!-- @click="changePath(section._path, c._dir)"> -->
           <v-card-text
           class="text-h6"><strong>{{ c.title }}</strong></v-card-text>
-
           <v-card-text>
             <div v-if="c.belt">
               <v-chip
@@ -47,10 +45,23 @@
               {{ n.description }}
               </v-card-text>
               <v-card-actions class="justify-space-between">
-                <v-btn
-            @click="changePath(section._path, c._dir)"
-            class="lighten-4 mx-0"
-            ><strong>Programme<v-icon color="info" class="mx-2" icon="mdi-plus"/></strong></v-btn>
+                <v-menu open-on-hover>
+                  <template v-slot:activator="{ props }">
+                  <v-btn
+                    color="primary"
+                    v-bind="props"
+                    class="lighten-4 mx-0"
+                    ><strong>Programme<v-icon color="info" class="mx-2" icon="mdi-plus"/></strong>
+                  </v-btn>
+                </template>
+                  <v-list>
+                    <v-list-item
+                    @click="changePath(section._path, c._dir)"
+                    v-for="(c2, keyC2) in c.children" :key="keyC2">
+                      <v-list-item-title>{{ c2.title }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
               <!-- <v-list v-for="(c2, keyC2) in c.children" :key="keyC2">
                 {{ c2.title }}
               </v-list> -->
@@ -80,7 +91,7 @@ export default {
   methods: {
     changePath(pathParent, id) {
       const router = useRouter();
-      router.push({ path: pathParent + "/", query: { id: id } });
+      router.push({ path: pathParent + "/", query: { id: id }});
     },
   },
 };