# docsNavTools

> Finishes a server-rendered docs sidebar in the browser: it opens scrolled to the current page, in the docked column and again each time a drawer holding it opens, and an optional field filters its pages by title while keeping each match's group open around it.

```ts
import { docsNavTools } from "@sdxc/ui/docs";
```

Works on the closest `[data-docs-nav]` around its host. The current link is the one with
`aria-current="page"`. When the host holds an `<input>`, typing hides every `li` whose
title misses the query, hides sections left empty, opens `<details>` groups holding a
match, and shows `[data-docs-nav-empty]` when nothing matches; clearing the field restores
every group's own open state. A page reload that resets the tree keeps the query applied.
The host is `hidden` until this runs, so a page without script never shows an inert field.

## Signature

```ts
docsNavTools(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<div data-docs-nav><div hidden mix={[docsNavTools()]}><input type="search" /></div><nav>…</nav></div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/docs` too.

### filterDocsNav

Shows the pages whose title holds every word of `query`, case- and accent-insensitive,
with the groups and sections that contain them; a group whose own title matches keeps all
its pages. An empty query restores the full tree and each group's own open state.

#### Signature

```ts
filterDocsNav(nav: HTMLElement, query: string, ownState: Map<HTMLDetailsElement, boolean>)
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `nav` | `HTMLElement` |  |
| `query` | `string` |  |
| `ownState` | `Map<HTMLDetailsElement, boolean>` |  |