From d16428002d07d12191f16f04bbd8f5b845b9377c Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 17 Mar 2025 16:34:40 +0700
Subject: [PATCH] feat: improve layout structure and enhance scroll
 functionality in ViewPage

---
 src/layouts/DrawerComponent.vue  |   2 +-
 src/pages/00_manual/ViewPage.vue | 107 ++++++++++++++++---------------
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 0faab3da..e4fbf578 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -364,7 +364,7 @@ onMounted(async () => {
                   <nav
                     class="row items-center no-wrap"
                     :class="{
-                      active: currentPath === sub.route,
+                      active: sub.route && currentPath.includes(sub.route),
                       disabled: sub.disabled,
                     }"
                   >
diff --git a/src/pages/00_manual/ViewPage.vue b/src/pages/00_manual/ViewPage.vue
index 07ff851f..6973b6a5 100644
--- a/src/pages/00_manual/ViewPage.vue
+++ b/src/pages/00_manual/ViewPage.vue
@@ -102,8 +102,8 @@ async function scrollTo(id: string) {
 </script>
 
 <template>
-  <div class="col full-height scroll rounded">
-    <div v-if="content" style="display: flex" class="markdown">
+  <main class="row full-height q-gutter-sm">
+    <section v-if="content" class="markdown col scroll full-height rounded">
       <div
         :key="ts"
         style="
@@ -123,56 +123,61 @@ async function scrollTo(id: string) {
           )
         "
       ></div>
-    </div>
+    </section>
 
-    <div>
-      <q-scroll-area class="fit">
-        <q-list padding>
-          <template v-for="(token, idx) in contentParsed">
-            <q-item
-              class="tabNative"
-              active-class="text-blue-7 active-item text-weight-medium tabActive"
-              :active="active === token.attrGet('id')"
-              @click="scrollTo(token.attrGet('id') || '')"
-              v-if="token.tag === 'h2' && token.type === 'heading_open'"
-              clickable
-              v-ripple
-              dense
-              exact
-            >
-              <q-item-section>
-                <q-item-label>
-                  <q-icon size="11px" name="mdi-circle-medium" />
-                  <span class="q-pl-xs">
-                    {{ contentParsed?.[idx + 1].content }}
-                  </span>
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-            <q-item
-              v-if="token.tag === 'h3' && token.type === 'heading_open'"
-              class="tabNative child-tab"
-              active-class="text-blue-7 active-item text-weight-medium tabActive"
-              :active="active === token.attrGet('id')"
-              @click="scrollTo(token.attrGet('id') || '')"
-              clickable
-              v-ripple
-              dense
-              exact
-            >
-              <q-item-section>
-                <q-item-label>
-                  <span class="q-pl-xl">
-                    {{ contentParsed?.[idx + 1].content }}
-                  </span>
-                </q-item-label>
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-list>
-      </q-scroll-area>
-    </div>
-  </div>
+    <section class="surface-1 rounded col-3 scroll full-height">
+      <q-list padding>
+        <template v-for="(token, idx) in contentParsed" :key="idx">
+          <q-item
+            v-if="token.tag === 'h2' && token.type === 'heading_open'"
+            class="tabNative"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <q-icon size="11px" name="mdi-circle-medium" />
+                <span class="q-pl-xs">
+                  {{ contentParsed?.[idx + 1].content }}
+                </span>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item
+            v-if="token.tag === 'h3' && token.type === 'heading_open'"
+            class="tabNative child-tab"
+            active-class="text-blue-7 active-item text-weight-medium tabActive"
+            :active="active === token.attrGet('id')"
+            @click="scrollTo(token.attrGet('id') || '')"
+            clickable
+            v-ripple
+            dense
+            exact
+          >
+            <q-item-section>
+              <q-item-label>
+                <span class="q-pl-xl">
+                  {{ contentParsed?.[idx + 1].content }}
+                </span>
+              </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>
+  </main>
 </template>
 
 <style lang="css" scoped>