layout.aowl

## docs/layout — the documentation shell.
##
## Wraps a page's content fragment with the theme, the left sidebar (rendered
## from `gNav` in `nav.aowl`), and a breadcrumb. Pages never build chrome; they
## return only their main column and `shell()` frames it. Built entirely from the
## `aoughwl/ui` public component surface — no bespoke CSS lives here.

import aoughwl/ui
import ./nav

proc navFor(nodes: seq[Nav]): HTML =
  ## Flatten the IA into sidebar rows: a `sectionHeader` for anything with
  ## children, a `menuItem` for a page. One pass, depth-first, so the visual
  ## order matches the tree order in `nav.aowl`.
  result = @[]
  var i = 0
  while i < nodes.len:
    let n = nodes[i]
    if n.kids.len > 0:
      result.add sectionHeader(n.title, n.detail)
      result.add navFor(n.kids)
    else:
      result.add menuItem(n.title, n.detail)
    inc i

proc shell*(title, detail: string; content: HTMLNode): HTMLNode =
  ## The two-column doc page: sidebar (generated) beside the content column.
  let nav = sidebar(navFor(gNav))
  let head = sectionHeader(title, detail)
  let frag = web:
    box:
      style:
        display: grid
        gridTemplateColumns: 264.px 1.fr
        gap: 28.px
        maxWidth: 1180.px
        margin: 0.px auto
        padding: 28.px
      box:
        style:
          position: sticky
          top: 20.px
          alignSelf: start
        slot(@[nav])
      box:
        style:
          display: flex
          flexDirection: column
          gap: 20.px
        slot(@[head, content])
  result = frag[0]