fix(layer): scope UI variant defaults to docus components

layer/app/app.config.ts

@@ -15,29 +15,20 @@ export default defineAppConfig({
       slots: {
         item: 'items-center',
         input: '[&_.iconify]:size-4 [&_.iconify]:mx-0.5',
-        itemLeadingIcon: 'size-4 mx-0.5',
       },
-    },
-    contentToc: {
-      defaultVariants: {
-        highlightVariant: 'circuit',
+      variants: {
+        size: {
+          md: {
+            itemLeadingIcon: 'size-4 mx-0.5',
+          },
+        },
       },
     },
     contentNavigation: {
       slots: {
-        linkLeadingIcon: 'size-4 mr-1',
+        linkLeadingIcon: 'size-4 mx-0.5',
         linkTrailing: 'hidden',
       },
-      defaultVariants: {
-        variant: 'link',
-        highlight: true,
-      },
-    },
-    navigationMenu: {
-      defaultVariants: {
-        variant: 'pill',
-        highlight: true,
-      },
     },
     pageLinks: {
       slots: {

layer/app/components/app/AppHeaderBody.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
+import { getFirstPagePath, useSubNavigation } from '../../composables/useSubNavigation'
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
+const { subNavigationMode } = useSubNavigation()
+
 const contentNavVariants = useUIConfig('contentNavigation')
+
+const items = computed<ContentNavigationItem[]>(() => {
+  const nav = navigation?.value || []
+  if (!subNavigationMode.value) return nav
+  return nav.map(({ children, ...item }) => ({
+    ...item,
+    path: children?.length ? getFirstPagePath({ ...item, children }) : item.path,
+  }))
+})
 </script>
 
 <template>
   <UContentNavigation
+    :collapsible="false"
     :highlight="contentNavVariants.highlight ?? true"
     :highlight-color="contentNavVariants.highlightColor"
     :variant="contentNavVariants.variant ?? 'link'"
     :color="contentNavVariants.color"
-    :navigation="navigation"
+    :navigation="items"
   />
 </template>

layer/app/components/app/AppHeaderCenter.vue

@@ -4,7 +4,7 @@
     class="w-full"
     variant="soft"
     :ui="{
-      leadingIcon: 'size-4 mr-1',
+      leadingIcon: 'size-4 mx-0.5',
     }"
   />
 </template>

layer/app/components/docs/DocsAsideLeftBody.vue

@@ -6,6 +6,7 @@ const contentNavVariants = useUIConfig('contentNavigation')
 
 <template>
   <UContentNavigation
+    :collapsible="false"
     :highlight="contentNavVariants.highlight ?? true"
     :highlight-color="contentNavVariants.highlightColor"
     :variant="contentNavVariants.variant ?? 'link'"

layer/app/components/docs/DocsAsideMobileBar.vue

@@ -34,8 +34,8 @@ const tocDrawerOpen = ref(false)
         :label="t('docs.menu')"
         icon="i-lucide-text-align-start"
         color="neutral"
-        variant="link"
-        size="xs"
+        variant="ghost"
+        square
         :aria-label="t('docs.menu')"
       />
 
@@ -67,7 +67,7 @@ const tocDrawerOpen = ref(false)
         trailing-icon="i-lucide-chevron-right"
         color="neutral"
         variant="link"
-        size="xs"
+        square
         :aria-label="t('docs.toc')"
       />
 
@@ -76,7 +76,7 @@ const tocDrawerOpen = ref(false)
           v-if="links?.length"
           :highlight="contentTocVariants.highlight ?? true"
           :highlight-color="contentTocVariants.highlightColor"
-          :highlight-variant="contentTocVariants.highlightVariant"
+          :highlight-variant="contentTocVariants.highlightVariant ?? 'circuit'"
           :color="contentTocVariants.color"
           :links="links"
           :open="true"

layer/app/components/docs/DocsAsideRight.vue

@@ -21,7 +21,7 @@ const contentTocVariants = useUIConfig('contentToc')
       v-if="links.length"
       :highlight="contentTocVariants.highlight ?? true"
       :highlight-color="contentTocVariants.highlightColor"
-      :highlight-variant="contentTocVariants.highlightVariant"
+      :highlight-variant="contentTocVariants.highlightVariant ?? 'circuit'"
       :color="contentTocVariants.color"
       :title="appConfig.toc?.title || t('docs.toc')"
       :links="links"

layer/app/composables/useSubNavigation.ts

@@ -1,6 +1,6 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 
-function getFirstPagePath(item: ContentNavigationItem): string {
+export function getFirstPagePath(item: ContentNavigationItem): string {
   let current = item
   while (current.children?.length) {
     current = current.children[0]!

layer/app/composables/useUIConfig.ts

@@ -24,7 +24,7 @@ interface UIConfigMap {
 export function useUIConfig<K extends keyof UIConfigMap>(componentName: K): ComputedRef<UIConfigMap[K]> {
   const appConfig = useAppConfig()
   return computed(() => {
-    const ui = appConfig.ui
+    const ui = appConfig.ui as Record<K, { defaultVariants?: UIConfigMap[K] } | undefined>
     return (ui?.[componentName]?.defaultVariants || {}) as UIConfigMap[K]
   })
 }