docs: improve responsiveness (#505)

Author: vachmara

docs/app/assets/css/main.css

@@ -1,2 +1,2 @@
 @import "tailwindcss";
-@import "@nuxt/ui-pro";
+@import "@nuxt/ui";

docs/app/components/Header.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/contents'
 
-inject<NavItem[]>('navigation', [])
+const navigation = inject<Ref<NavItem[]>>('navigation')
 // const { metaSymbol } = useShortcuts()
 const { header } = useAppConfig()
+const route = useRoute()
 const links = [
   {
     label: 'Guides',
@@ -18,6 +19,11 @@ const links = [
     to: '/learn',
   },
 ]
+
+const navItems = computed(() => {
+  const v = route.path.startsWith('/docs') ? navigation?.value?.[0] : navigation?.value?.[1]
+  return v?.children || []
+})
 </script>
 
 <template>
@@ -47,5 +53,21 @@ const links = [
         />
       </template>
     </template>
+
+    <template #body>
+      <UNavigationMenu
+        :items="links"
+        orientation="vertical"
+        class="-mx-2.5"
+      />
+      <template v-if="route.path.startsWith('/docs/')">
+        <UContentNavigation
+          :key="route.path"
+          :collapsible="false"
+          :navigation="navItems"
+          highlight
+        />
+      </template>
+    </template>
   </UHeader>
 </template>

docs/app/layouts/docs.vue

@@ -11,17 +11,23 @@ const navItems = computed(() => {
 </script>
 
 <template>
-  <div class="relative mb-20">
-    <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-blue-900/20 pointer-events-none absolute w-full top-[1px] transition-all text-sky-400 flex-shrink-0 duration-[400ms] opacity-30 z-20"><mask id="path-1-inside-1_414_5526" fill="white"><path d="M0 0H1440V181H0V0Z" /></mask><path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" /><path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" /><defs><linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient><linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity="0" /><stop offset="0.395" stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient></defs></svg>
-    <div class="px-10 pt-10 pt-1">
-      <div class="flex gap-10">
-        <UAside class="w-[300px] pt-10">
-          <UContentNavigation :navigation="navItems" highlight />
-        </UAside>
-        <div class="xl:ml-[100px] max-w-[45rem]">
-          <slot />
-        </div>
-      </div>
-    </div>
-  </div>
+  <UMain class="relative mb-20">
+    <svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute w-full top-[1px] transition-all text-sky-400 flex-shrink-0 duration-[400ms] opacity-30 z-20"><mask id="path-1-inside-1_414_5526" fill="white"><path d="M0 0H1440V181H0V0Z" /></mask><path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_414_5526)" fill-opacity="0.22" /><path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_414_5526)" mask="url(#path-1-inside-1_414_5526)" /><defs><linearGradient id="paint0_linear_414_5526" x1="720" y1="0" x2="720" y2="181" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient><linearGradient id="paint1_linear_414_5526" x1="0" y1="90.5" x2="1440" y2="90.5" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor" stop-opacity="0" /><stop offset="0.395" stop-color="currentColor" /><stop offset="1" stop-color="currentColor" stop-opacity="0" /></linearGradient></defs></svg>
+    <UContainer>
+      <UPage>
+        <template #left>
+          <UPageAside>
+            <UContentNavigation
+              :key="route.path"
+              :collapsible="false"
+              :navigation="navItems"
+              highlight
+            />
+          </UPageAside>
+        </template>
+
+        <slot />
+      </UPage>
+    </UContainer>
+  </UMain>
 </template>

docs/app/pages/index.vue

@@ -340,7 +340,7 @@ const contributors = useRuntimeConfig().public.contributors
             </div>
           </div>
         </div>
-        <UButtonGroup class="mb-4 flex" :orientation="btnGroupOrientation">
+        <UFieldGroup class="mb-4 flex" :orientation="btnGroupOrientation">
           <UButton :variant="webVital === 'fcp' ? 'solid' : 'soft'" :active="webVital === 'fcp'" @click="webVital = 'fcp'">
             First Contentful Paint
           </UButton>
@@ -350,7 +350,7 @@ const contributors = useRuntimeConfig().public.contributors
           <UButton :variant="webVital === 'si' ? 'solid' : 'soft'" :active="webVital === 'si'" @click="webVital = 'si'">
             Speed Index
           </UButton>
-        </UButtonGroup>
+        </UFieldGroup>
         <p class="text-gray-500 dark:text-gray-400">
           <span class="opacity-50 text-sm">*Note that PageSpeed Insights lab data is a snapshot from a particular day, which tends to be variable. We will be updating this section with aggregated results and/or field data from production usage as soon as it's available.</span>
         </p>

docs/nuxt.config.ts

@@ -6,7 +6,7 @@ import NuxtScripts from '../src/module'
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    '@nuxt/ui-pro',
+    '@nuxt/ui',
     '@nuxt/fonts',
     '@vueuse/nuxt',
     NuxtScripts,

docs/package.json

@@ -17,7 +17,7 @@
     "@nuxt/fonts": "^0.11.4",
     "@nuxt/image": "^1.11.0",
     "@nuxt/scripts": "workspace:*",
-    "@nuxt/ui-pro": "^3.3.4",
+    "@nuxt/ui": "4.0.0-alpha.2",
     "@nuxthq/studio": "^2.2.1",
     "@nuxtjs/seo": "^3.2.2",
     "@vueuse/core": "^13.9.0",