feat: enhance layout and add conditional rendering for Table of Contents in ViewPage

src/pages/00_manual/ViewPage.vue

@@ -103,33 +103,14 @@ async function scrollTo(id: string) {
 </script>
 
 <template>
-  <main class="row full-height q-gutter-sm">
+  <main
+    class="full-height q-gutter-sm"
+    :class="{ 'row reverse': $q.screen.gt.xs, column: $q.screen.xs }"
+  >
     <section
-      ref="wrapper"
-      v-if="content"
-      class="markdown col scroll full-height rounded"
+      v-if="toc"
+      class="surface-1 rounded col-md-3 col-12 scroll full-height"
     >
-      <div
-        style="
-          width: 100%;
-          flex: 1;
-          border-radius: 0.5rem;
-          border: 1px solid var(--border-color);
-          padding: 1rem;
-        "
-        class="surface-1"
-        v-html="
-          md.render(
-            content.replaceAll(
-              'assets/',
-              `${baseUrl}/manual/${category}/assets/`,
-            ),
-          )
-        "
-      ></div>
-    </section>
-
-    <section class="surface-1 rounded col-3 scroll full-height">
       <q-list padding>
         <template v-for="(token, idx) in contentParsed" :key="idx">
           <q-item
@@ -171,16 +152,46 @@ async function scrollTo(id: string) {
               </q-item-label>
             </q-item-section>
           </q-item>
-
-          <q-item clickable v-ripple dense exact>
-            <q-item-label>
-              <q-icon size="11px" name="mdi-circle-medium" />
-              mocking
-            </q-item-label>
-          </q-item>
         </template>
       </q-list>
     </section>
+
+    <section v-if="!toc && $q.screen.xs">
+      <q-btn
+        dense
+        class="full-width text-capitalize"
+        flat
+        @click="toc = true"
+        color="info"
+      >
+        {{ $t('general.tableOfContent') }}
+      </q-btn>
+    </section>
+
+    <section
+      v-if="content || (!toc && $q.screen.xs)"
+      ref="wrapper"
+      class="markdown col scroll full-height rounded"
+    >
+      <div
+        style="
+          width: 100%;
+          flex: 1;
+          border-radius: 0.5rem;
+          border: 1px solid var(--border-color);
+          padding: 1rem;
+        "
+        class="surface-1"
+        v-html="
+          md.render(
+            content.replaceAll(
+              'assets/',
+              `${baseUrl}/manual/${category}/assets/`,
+            ),
+          )
+        "
+      ></div>
+    </section>
   </main>
 </template>