chore(docs): v3 landing file system routing improvements (#859)

nuxt · Aug 22, 2022 · e4cfc7c · e4cfc7c
1 parent fd70201
commit e4cfc7c
Showing 2 changed files with 29 additions and 30 deletions.
diff --git a/components/content/docs/framework/v3/routing/DocsFrameworkV3RoutingContainer.vue b/components/content/docs/framework/v3/routing/DocsFrameworkV3RoutingContainer.vue
@@ -19,19 +19,9 @@
         </div>
       </div>
 
-      <div
-        class="absolute inset-0 flex flex-col items-center justify-start space-y-2 transition-opacity duration-300 top-2 md:top-0 md:justify-center"
-        :class="currentSection === 1 ? 'opacity-100' : 'opacity-0'"
-      >
-        <div class="bg-gray-200 dark:bg-gray-600 rounded-xl w-[300px] h-[143px]" />
-        <div v-for="(line, index) in 8" :key="index" class="flex flex-col gap-y-3" :class="index === 0 ? 'w-[100px] self-start ml-1.5 md:ml-[300px]' : 'w-[300px]' ">
-          <div class="w-full bg-gray-200 dark:bg-gray-600 h-[11px] rounded-xl" />
-        </div>
-      </div>
-
       <div
         class="absolute inset-0 flex transition-opacity duration-300 rounded-l-2xl"
-        :class="currentSection === 2 ? 'opacity-100' : 'opacity-0'"
+        :class="currentSection === 1 ? 'opacity-100' : 'opacity-0'"
       >
         <div class="absolute inset-y-0 left-0 w-[39px] rounded-l-xl h-full" :class="dashboardHovered ? 'bg-green-300' : 'bg-gray-200'" />
         <div
@@ -58,6 +48,15 @@
           </div>
         </div>
       </div>
+      <div
+        class="absolute inset-0 flex flex-col items-center justify-start space-y-2 transition-opacity duration-300 top-2 md:top-0 md:justify-center"
+        :class="currentSection === 2 ? 'opacity-100' : 'opacity-0'"
+      >
+        <div class="bg-gray-200 dark:bg-gray-600 rounded-xl w-[300px] h-[143px]" />
+        <div v-for="(line, index) in 8" :key="index" class="flex flex-col gap-y-3" :class="index === 0 ? 'w-[100px] self-start ml-1.5 md:ml-[300px]' : 'w-[300px]' ">
+          <div class="w-full bg-gray-200 dark:bg-gray-600 h-[11px] rounded-xl" />
+        </div>
+      </div>
       <div
         class="flex flex-col items-center justify-center w-full h-full transition-opacity duration-300 gap-y-6"
         :class="currentSection === 3 && step === 0 ? 'opacity-100' : 'opacity-0'"
@@ -103,20 +102,6 @@
             </DocsFrameworkV3RoutingFile>
           </div>
           <div v-if="currentSection === 1" class="absolute inset-0">
-            <DocsFrameworkV3RoutingFolder line chevron-down>
-              pages
-            </DocsFrameworkV3RoutingFolder>
-            <DocsFrameworkV3RoutingFolder class="mt-2 ml-4" line chevron-down line-class="inset-y-0 bottom-44 left-[25px] top-[60px]">
-              blog
-            </DocsFrameworkV3RoutingFolder>
-            <DocsFrameworkV3RoutingFile class="mt-2 ml-6 ml-[36px] mt-1 text-green-400">
-              [slug.vue]
-            </DocsFrameworkV3RoutingFile>
-            <DocsFrameworkV3RoutingFile class="mt-4 ml-6 text-gray-100">
-              index.vue
-            </DocsFrameworkV3RoutingFile>
-          </div>
-          <div v-if="currentSection === 2" class="absolute inset-0">
             <DocsFrameworkV3RoutingFolder line chevron-down>
               pages
             </DocsFrameworkV3RoutingFolder>
@@ -130,7 +115,7 @@
               message
             </DocsFrameworkV3RoutingFolder>
             <DocsFrameworkV3RoutingFile class="mt-2 ml-6 ml-[56px] mt-1 text-gray-100 hover:text-green-400" @mouseenter="idHovered = true" @mouseleave="idHovered = false">
-              [id.vue]
+              [id].vue
             </DocsFrameworkV3RoutingFile>
             <DocsFrameworkV3RoutingFile class="mt-4 ml-[40px] text-gray-100 hover:text-green-400" @mouseenter="messageHovered = true" @mouseleave="messageHovered = false">
               message.vue
@@ -142,6 +127,20 @@
               index.vue
             </DocsFrameworkV3RoutingFile>
           </div>
+          <div v-if="currentSection === 2" class="absolute inset-0">
+            <DocsFrameworkV3RoutingFolder line chevron-down>
+              pages
+            </DocsFrameworkV3RoutingFolder>
+            <DocsFrameworkV3RoutingFolder class="mt-2 ml-4" line chevron-down line-class="inset-y-0 bottom-44 left-[25px] top-[60px]">
+              blog
+            </DocsFrameworkV3RoutingFolder>
+            <DocsFrameworkV3RoutingFile class="mt-2 ml-6 ml-[36px] mt-1 text-green-400">
+              [slug].vue
+            </DocsFrameworkV3RoutingFile>
+            <DocsFrameworkV3RoutingFile class="mt-4 ml-6 text-gray-100">
+              index.vue
+            </DocsFrameworkV3RoutingFile>
+          </div>
           <div v-if="currentSection === 3" class="absolute inset-0">
             <DocsFrameworkV3RoutingFolder line chevron-down line-class="inset-y-0 left-2 bottom-20 top-8">
               pages

diff --git a/content/docs/3.x/_collections/routing.md b/content/docs/3.x/_collections/routing.md
@@ -4,14 +4,14 @@ routings:
     icon: static-route.svg
     description: Nuxt ships by default with best Lighthouse and Web vitals score so users won’t wait for accessing your website.
     iconColor: static-route-white.svg
-  - title: Nested routes
-    description: Nuxt ships by default with best Lighthouse and Web vitals score so users won’t wait for accessing your website.
-    icon: nested-routes.svg
-    iconColor: nested-routes-white.svg
   - title: Dynamic routes
     description: 'Once the website is loaded, users will discover a new experience: an application feeling right into their browser.'
     icon: dynamic-routes.svg
     iconColor: dynamic-routes-white.svg
+  - title: Nested routes
+    description: Nuxt ships by default with best Lighthouse and Web vitals score so users won’t wait for accessing your website.
+    icon: nested-routes.svg
+    iconColor: nested-routes-white.svg
   - title: Middleware
     description: Nuxt server renders your pages to bring your website the full visibility it deserves so users will find you website.
     icon: middleware.svg