From 24c65e61c4f6ad629ffea02c14799af0513713ea Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 16 Jun 2026 11:23:14 +0200
Subject: [PATCH 1/2] fix(layer): scope UI variant defaults to docus components

Remove global `defaultVariants` from app config so overriding Nuxt UI
components (e.g. a custom `AppHeaderCenter` with a `NavigationMenu`) no
longer inherit forced `highlight`/`variant` styles. Defaults now live as
explicit fallbacks in the Docus components themselves.

Also limit the mobile header body navigation to first-level sections when
`navigation.sub` is set, since deeper levels are handled by the per-section
drawer.
---
 layer/app/app.config.ts                       | 23 ++++++-------------
 layer/app/components/app/AppHeaderBody.vue    | 17 ++++++++++++--
 layer/app/components/app/AppHeaderCenter.vue  |  2 +-
 .../app/components/docs/DocsAsideLeftBody.vue |  1 +
 .../components/docs/DocsAsideMobileBar.vue    | 10 ++++----
 layer/app/components/docs/DocsAsideRight.vue  |  2 +-
 layer/app/composables/useSubNavigation.ts     |  2 +-
 layer/app/composables/useUIConfig.ts          |  2 +-
 8 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/layer/app/app.config.ts b/layer/app/app.config.ts
index 825c1881f..3e72220c3 100644
--- a/layer/app/app.config.ts
+++ b/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: {
diff --git a/layer/app/components/app/AppHeaderBody.vue b/layer/app/components/app/AppHeaderBody.vue
index f530fb9ba..21c507c19 100644
--- a/layer/app/components/app/AppHeaderBody.vue
+++ b/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'"
+    :variant="contentNavVariants.variant ?? 'pill'"
     :color="contentNavVariants.color"
-    :navigation="navigation"
+    :navigation="items"
   />
 </template>
diff --git a/layer/app/components/app/AppHeaderCenter.vue b/layer/app/components/app/AppHeaderCenter.vue
index 6a7f4d415..65155bfee 100644
--- a/layer/app/components/app/AppHeaderCenter.vue
+++ b/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>
diff --git a/layer/app/components/docs/DocsAsideLeftBody.vue b/layer/app/components/docs/DocsAsideLeftBody.vue
index 96507c98b..2bde7cf89 100644
--- a/layer/app/components/docs/DocsAsideLeftBody.vue
+++ b/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'"
diff --git a/layer/app/components/docs/DocsAsideMobileBar.vue b/layer/app/components/docs/DocsAsideMobileBar.vue
index 788f53bdb..4ee61c4a0 100644
--- a/layer/app/components/docs/DocsAsideMobileBar.vue
+++ b/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')"
       />
 
@@ -44,7 +44,7 @@ const tocDrawerOpen = ref(false)
           :navigation="sidebarNavigation"
           :highlight="contentNavVariants.highlight ?? true"
           :highlight-color="contentNavVariants.highlightColor"
-          :variant="contentNavVariants.variant ?? 'link'"
+          :variant="contentNavVariants.variant ?? 'pill'"
           :color="contentNavVariants.color"
           default-open
           trailing-icon="i-lucide-chevron-right"
@@ -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"
diff --git a/layer/app/components/docs/DocsAsideRight.vue b/layer/app/components/docs/DocsAsideRight.vue
index ecb5b716f..635a043ce 100644
--- a/layer/app/components/docs/DocsAsideRight.vue
+++ b/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"
diff --git a/layer/app/composables/useSubNavigation.ts b/layer/app/composables/useSubNavigation.ts
index 90f26c828..c875a85f6 100644
--- a/layer/app/composables/useSubNavigation.ts
+++ b/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]!
diff --git a/layer/app/composables/useUIConfig.ts b/layer/app/composables/useUIConfig.ts
index 701d8c520..0b1349606 100644
--- a/layer/app/composables/useUIConfig.ts
+++ b/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]
   })
 }

From 82eb464c0c9fed1b7081070b8987b64345d66c0b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 16 Jun 2026 11:28:04 +0200
Subject: [PATCH 2/2] up

---
 layer/app/components/app/AppHeaderBody.vue       | 2 +-
 layer/app/components/docs/DocsAsideMobileBar.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layer/app/components/app/AppHeaderBody.vue b/layer/app/components/app/AppHeaderBody.vue
index 21c507c19..8e906beea 100644
--- a/layer/app/components/app/AppHeaderBody.vue
+++ b/layer/app/components/app/AppHeaderBody.vue
@@ -23,7 +23,7 @@ const items = computed<ContentNavigationItem[]>(() => {
     :collapsible="false"
     :highlight="contentNavVariants.highlight ?? true"
     :highlight-color="contentNavVariants.highlightColor"
-    :variant="contentNavVariants.variant ?? 'pill'"
+    :variant="contentNavVariants.variant ?? 'link'"
     :color="contentNavVariants.color"
     :navigation="items"
   />
diff --git a/layer/app/components/docs/DocsAsideMobileBar.vue b/layer/app/components/docs/DocsAsideMobileBar.vue
index 4ee61c4a0..a67e2a850 100644
--- a/layer/app/components/docs/DocsAsideMobileBar.vue
+++ b/layer/app/components/docs/DocsAsideMobileBar.vue
@@ -44,7 +44,7 @@ const tocDrawerOpen = ref(false)
           :navigation="sidebarNavigation"
           :highlight="contentNavVariants.highlight ?? true"
           :highlight-color="contentNavVariants.highlightColor"
-          :variant="contentNavVariants.variant ?? 'pill'"
+          :variant="contentNavVariants.variant ?? 'link'"
           :color="contentNavVariants.color"
           default-open
           trailing-icon="i-lucide-chevron-right"