feat: add support for page layout within navigation

app/app.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { NavigationItem } from 'comark-content'
 import type { SearchSection } from './utils/search-sections'
+import { useRoute } from 'vue-router'
 
 const { seo, docs } = useAppConfig()
 
 const content = useDocsContent()
+const route = useRoute()
 
 const { data: navigation } = await useAsyncData('navigation', () => content.value.client.navigation(), {
   watch: [() => content.value.base],
@@ -21,7 +23,14 @@ const {
 
 onNuxtReady(() => loadSearchSections())
 
+const nuxtApp = useNuxtApp()
 const navTree = computed<NavigationItem[]>(() => prefixNavigation(navigation.value ?? [], content.value.base))
+const navigationLayout = ref(findNavigationLayout(navTree.value, route.path))
+onNuxtReady(() => {
+  nuxtApp.hook('page:finish', () => {
+    navigationLayout.value = findNavigationLayout(navTree.value, route.path)
+  })
+})
 const searchFiles = computed<SearchSection[]>(() =>
   (files.value ?? []).map((section) => {
     const [path, hash] = section.id.split('#')
@@ -52,6 +61,7 @@ useSeoMeta({
 })
 
 provide('navigation', navTree)
+provide('layout', navigationLayout)
 
 // const colorMode = useColorMode()
 const historyOpen = useVersionHistory()
@@ -82,9 +92,17 @@ defineShortcuts({
     <AppHeader />
 
     <UMain>
-      <NuxtLayout>
-        <NuxtPage />
-      </NuxtLayout>
+      <Suspense>
+        <LayoutsPage v-if="navigationLayout === 'page'">
+          <NuxtPage />
+        </LayoutsPage>
+        <LayoutsDocs v-else-if="navigationLayout === 'docs'">
+          <NuxtPage />
+        </LayoutsDocs>
+        <UContainer v-else>
+          <NuxtPage />
+        </UContainer>
+      </Suspense>
     </UMain>
 
     <AppFooter />

app/components/docs/DocsAsideMobileBar.vue

@@ -14,6 +14,7 @@ const menuDrawerOpen = ref(false)
 const tocDrawerOpen = ref(false)
 const navigationRef = ref<HTMLElement | null>(null)
 let observer: IntersectionObserver | undefined
+const layout = inject('layout')
 
 watch(menuDrawerOpen, (open) => {
   nextTick(() => {
@@ -28,9 +29,11 @@ watch(menuDrawerOpen, (open) => {
 
 <template>
   <div
-    class="lg:hidden sticky top-(--ui-header-height) z-10 bg-default -mx-6 p-2 px-6 border-b border-muted flex justify-between"
+    class="lg:hidden sticky top-(--ui-header-height) z-10 bg-default -mx-6 p-2 px-6 border-b border-muted flex h-13"
+    :class="layout === 'page' ? 'justify-end' : 'justify-between'"
   >
     <UDrawer
+      v-if="layout === 'docs'"
       v-model:open="menuDrawerOpen"
       direction="left"
       :title="title"

app/components/layouts/LayoutsPage.vue

@@ -0,0 +1,7 @@
+<template>
+  <UContainer class="max-w-7xl">
+    <UTheme :ui="{ pageHeader: { container: 'lg:pt-8' }, contentToc: { container: 'lg:pt-16' } }">
+      <slot />
+    </UTheme>
+  </UContainer>
+</template>

app/pages/[...slug].vue

@@ -6,13 +6,13 @@
 import Browser from '../components/Browser.vue'
 
 definePageMeta({
-  layout: 'docs',
   path: '/:slug(.+)',
 })
 
 const { toc, seo } = useAppConfig()
 const navigation = inject<Ref<NavigationItem[]>>('navigation')
 const content = useDocsContent()
+const layout = inject<Ref<NavigationLayout>>('layout')
 
 const { data: page } = await useAsyncData(`${content.value.base}:${content.value.path}`, () =>
   content.value.client.get(content.value.path)
@@ -36,8 +36,8 @@
 
 const surroundLinks = computed(() => findSurroundLinks(navigation?.value, selfPath.value))
 
 const fm = computed<Record<string, any>>(() => page.value?.data ?? {})
 const tocLinks = computed<any[]>(() => (page.value?.meta as any)?.toc?.links ?? [])
 
 const title = computed(() => fm.value.seo?.title || fm.value.title)
 const description = computed(() => fm.value.seo?.description || fm.value.description)
@@ -126,6 +126,7 @@
       />
 
       <UContentSurround
+        v-if="layout === 'docs'"
         :surround="surroundLinks as any"
         :ui="{ root: !surroundLinks[0] ? 'sm:grid-cols-1' : 'sm:grid-cols-2' }"
       />

app/utils/navigation.ts

@@ -64,6 +64,35 @@ export interface BreadcrumbItem {
   path?: string
 }
 
+export type NavigationLayout = 'docs' | 'page'
+
+/** Layout declared by the nearest matching page or directory navigation node. */
+export function findNavigationLayout(
+  navigation: NavigationItem[] | undefined | null,
+  path: string | undefined
+): NavigationLayout | undefined {
+  if (!navigation?.length || !path || path === '/') return undefined
+
+  let layout: NavigationLayout | undefined
+  const visit = (items: NavigationItem[]) => {
+    for (const item of items) {
+      const isPage = item.path === path
+      const isDirectory = Boolean(
+        item.children?.length
+        && item.path !== '/'
+        && path.startsWith(`${item.path}/`)
+      )
+      if (!isPage && !isDirectory) continue
+
+      if (item.layout === 'docs' || item.layout === 'page') layout = item.layout
+      if (item.children?.length) visit(item.children)
+    }
+  }
+
+  visit(navigation)
+  return layout || 'docs'
+}
+
 /** Trail of navigation items leading to `path`, including the page itself. */
 export function findBreadcrumb(
   navigation: NavigationItem[] | undefined | null,

playground/app/app.config.ts

@@ -12,6 +12,7 @@ export default defineAppConfig({
     ecosystem: [{ mark: 'comark-content', to: 'https://content.comark.dev', label: 'Comark Content' }],
     nav: [
       { label: 'Documentation', sections: ['getting-started', 'writing', 'concepts', 'deployment'] },
+      { label: 'Page', to: '/page' }
     ],
   },
   footer: {

playground/content/2.writing/5.navigation.md

@@ -26,6 +26,17 @@ title: Getting Started
 
 Page titles come from frontmatter — `navigation.title` when set, `title` otherwise. Pages with `navigation: false` are excluded from the tree entirely (and therefore from prev/next links, search, and `llms.txt`).
 
+## Section layouts
+
+Pages use the `docs` layout by default, which includes the navigation sidebar. Set `layout: page` in a directory's `.navigation.yml` to render every page in that directory without the sidebar:
+
+```yaml [content/3.examples/.navigation.yml]
+title: Examples
+layout: page
+```
+
+The layout applies to nested directories too. A nested `.navigation.yml` can set `layout: docs` to restore the sidebar. The `page` layout keeps the header, footer and page table of contents.
+
 ## Header tabs
 
 The header renders one tab per group in `header.nav` from `app.config.ts`. Each group maps top-level content sections to a tab:

playground/content/page.md

@@ -0,0 +1,23 @@
+---
+title: Page
+description: This is an example using the page layout.
+navigation:
+  layout: page
+---
+
+In order to use the `page` layout without the left aside.
+
+## Usage
+
+You only need to set:
+
+```yaml
+---
+navigation:
+  layout: page
+---
+```
+
+## TOC
+
+The Table of Contents stays if you have headings.

playground/content/pages/.navigation.yml

@@ -0,0 +1 @@
+layout: page

playground/content/pages/test.md

@@ -0,0 +1,21 @@
+---
+title: Test
+description: This is an example using the page layout.
+---
+
+In order to use the `page` layout without the left aside.
+
+## Usage
+
+You only need to set:
+
+```yaml
+---
+navigation:
+  layout: page
+---
+```
+
+## TOC
+
+The Table of Contents stays if you have headings.

test/navigation.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { findBreadcrumb, findPageHeadline, findSurroundLinks } from '../app/utils/navigation'
+import { findBreadcrumb, findNavigationLayout, findPageHeadline, findSurroundLinks } from '../app/utils/navigation'
 import type { NavigationItem } from 'comark-content'
 
 const nav = [
@@ -76,6 +76,67 @@ describe('findBreadcrumb', () => {
   })
 })
 
+describe('findNavigationLayout', () => {
+  const navigation = [
+    {
+      title: 'Examples',
+      path: '/examples',
+      page: false,
+      layout: 'page',
+      children: [
+        { title: 'Overview', path: '/examples/overview' },
+        {
+          title: 'API',
+          path: '/examples/api',
+          page: false,
+          layout: 'docs',
+          children: [{ title: 'Reference', path: '/examples/api/reference' }],
+        },
+      ],
+    },
+    { title: 'Examples extended', path: '/examples-extended', layout: 'docs' },
+  ] as unknown as NavigationItem[]
+
+  it('inherits a directory layout for its pages, including hidden pages', () => {
+    expect(findNavigationLayout(navigation, '/examples/overview')).toBe('page')
+    expect(findNavigationLayout(navigation, '/examples/hidden')).toBe('page')
+  })
+
+  it('lets a nested directory override an inherited layout', () => {
+    expect(findNavigationLayout(navigation, '/examples/api/reference')).toBe('docs')
+  })
+
+  it('does not inherit a layout from a partial path segment match', () => {
+    expect(findNavigationLayout(navigation, '/examples-extended/page')).toBe('docs')
+  })
+
+  it('supports navigation paths prefixed for version previews', () => {
+    const previewNavigation = [{
+      title: 'Examples',
+      path: '/tree/feature/examples',
+      page: false,
+      layout: 'page',
+      children: [{ title: 'Overview', path: '/tree/feature/examples/overview' }],
+    }] as unknown as NavigationItem[]
+
+    expect(findNavigationLayout(previewNavigation, '/tree/feature/examples/overview')).toBe('page')
+  })
+
+  it('falls back to docs without a matching supported layout', () => {
+    expect(findNavigationLayout(navigation, '/unknown')).toBe('docs')
+    expect(findNavigationLayout(
+      [{ title: 'Custom', path: '/custom', layout: 'custom' }] as unknown as NavigationItem[],
+      '/custom'
+    )).toBe('docs')
+  })
+
+  it('returns undefined for the landing page or without enough navigation context', () => {
+    expect(findNavigationLayout(navigation, '/')).toBeUndefined()
+    expect(findNavigationLayout([], '/examples')).toBeUndefined()
+    expect(findNavigationLayout(null, undefined)).toBeUndefined()
+  })
+})
+
 describe('findSurroundLinks', () => {
   it('returns the flattened previous and next pages', () => {
     expect(findSurroundLinks(nav, '/getting-started/installation')).toEqual([