From 4d8b89b3f0ff9ca2abdd4d8ce5f5807d5819f766 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Tue, 23 Jul 2024 22:42:50 +0800
Subject: [PATCH] fix: place aside in app.vue to avoid navigation shifts

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 app.vue                     | 19 +++++++++-
 components/layout/Aside.vue |  2 +-
 pages/[...slug].vue         | 74 ++++++++++++++++---------------------
 pages/index.vue             |  2 -
 4 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/app.vue b/app.vue
index bedfb019..05ccef02 100644
--- a/app.vue
+++ b/app.vue
@@ -1,8 +1,23 @@
 <template>
+  <NuxtLoadingIndicator :color="false" class="z-100 bg-primary80" />
   <ConfigProvider :use-id="useIdFunction">
-    <NuxtLoadingIndicator :color="false" class="z-100 bg-primary80" />
-    <NuxtPage />
+    <LayoutHeader />
+
+    <div v-if="$route.path !== '/'" class="border-b min-h-screen">
+      <div
+        class="px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+        :class="[config.main.padded && 'container']"
+      >
+        <aside class="fixed top-[102px] md:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
+          <LayoutAside :is-mobile="false" />
+        </aside>
+        <NuxtPage />
+      </div>
+    </div>
+    <NuxtPage v-else />
+
     <Toaster />
+    <LayoutFooter />
   </ConfigProvider>
 </template>
 
diff --git a/components/layout/Aside.vue b/components/layout/Aside.vue
index a94120a6..b0886c0f 100644
--- a/components/layout/Aside.vue
+++ b/components/layout/Aside.vue
@@ -45,5 +45,5 @@ const tree = computed(() => {
   return navigation.value;
 });
 
-const path = useRoute().path;
+const path = computed(() => useRoute().path);
 </script>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 21fdc665..71c72492 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,52 +1,40 @@
 <template>
-  <LayoutHeader />
-  <div class="border-b min-h-screen">
-    <div
-      class="px-4 md:px-8 flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
-      :class="[config.main.padded && 'container']"
-    >
-      <aside class="fixed top-[102px] md:top-[60px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto">
-        <LayoutAside :is-mobile="false" />
-      </aside>
-      <main class="relative py-6" :class="[config.toc.enable && 'lg:gap-10 lg:py-8 lg:grid lg:grid-cols-[1fr_200px]']">
-        <div class="mx-auto w-full min-w-0">
-          <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb" class="mb-4" />
+  <main class="relative py-6" :class="[config.toc.enable && 'lg:gap-10 lg:py-8 lg:grid lg:grid-cols-[1fr_200px]']">
+    <div class="mx-auto w-full min-w-0">
+      <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb" class="mb-4" />
 
-          <div v-if="config.main.showTitle" class="space-y-2 mb-6">
-            <ProseH1>
-              {{ page?.title }}
-            </ProseH1>
-            <p class="text-lg text-muted-foreground">
-              {{ page?.description }}
-            </p>
-          </div>
+      <div v-if="config.main.showTitle" class="space-y-2 mb-6">
+        <ProseH1>
+          {{ page?.title }}
+        </ProseH1>
+        <p class="text-lg text-muted-foreground">
+          {{ page?.description }}
+        </p>
+      </div>
 
-          <Alert
-            v-if="!page?.body || page?.body?.children?.length === 0"
-            title="Empty Page"
-            icon="lucide:circle-x"
-          >
-            Start writing in <ProseCodeInline>content/{{ page?._file }}</ProseCodeInline> to see this page taking shape.
-          </Alert>
+      <Alert
+        v-if="!page?.body || page?.body?.children?.length === 0"
+        title="Empty Page"
+        icon="lucide:circle-x"
+      >
+        Start writing in <ProseCodeInline>content/{{ page?._file }}</ProseCodeInline> to see this page taking shape.
+      </Alert>
 
-          <ContentRenderer
-            v-else
-            :key="page._id"
-            :value="page"
-            class="docs-content"
-          />
+      <ContentRenderer
+        v-else
+        :key="page._id"
+        :value="page"
+        class="docs-content"
+      />
 
-          <LayoutPrevNext />
-        </div>
-        <div v-if="config.toc.enable" class="hidden text-sm lg:block">
-          <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
-            <LayoutToc :is-small="false" />
-          </div>
-        </div>
-      </main>
+      <LayoutPrevNext />
     </div>
-  </div>
-  <LayoutFooter />
+    <div v-if="config.toc.enable" class="hidden text-sm lg:block">
+      <div class="sticky top-[90px] h-[calc(100vh-3.5rem)] overflow-hidden">
+        <LayoutToc :is-small="false" />
+      </div>
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/index.vue b/pages/index.vue
index 4b962b90..7100714a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <LayoutHeader />
   <div
     class="px-4 md:px-8 py-6"
     :class="[config.main.padded && 'container']"
@@ -9,7 +8,6 @@
       :value="page"
     />
   </div>
-  <LayoutFooter />
 </template>
 
 <script setup lang="ts">