# Sidebar

The side panels: Pages (thumbnails), Outline, Attachments, Signatures and Comments share one sidebar (see [Document features](https://kernstra.com/docs/web-sdk/guides/document-features)). Each panel is `false` to leave it out, or an object for its own settings; a panel is offered on its own terms besides — outline and attachments when the document has some or they can be made, signatures when the document declares some, comments under every license (reading comments is viewing; the panel is read-only without `annotations`).

The current page is marked in the Pages panel by a bar in the gutter rather than a ring around the page. A panel that may edit is offered even to a document without any of its content, so the first bookmark or attachment can be made; a read-only one appears only for a document that has some.

A host that draws its own chrome (`toolbar.layout: 'none'`) with its own Pages button sets `rail: false`, or it ends up with two controls for one panel: the SDK then draws neither the rail of tabs nor the panel's collapse button, the sidebar shows only while a panel is open, and the host's button is the way in and out through [`viewer.openPanel()`](https://kernstra.com/docs/web-sdk/api/pdfviewer/openpanel) — and where the panel floats over the page as a drawer, Escape inside it and a tap on its backdrop close it too, so a keyboard is never without a way out. On a phone the panel is the screen, with no backdrop to tap and no close of ours: your button is the only way out, so keep it outside the container. The [`panelChanged`](https://kernstra.com/docs/web-sdk/api/events#ev-panelchanged) event reports every change, whoever made it, so that button stays right.

- Interface: `SidebarConfig`
- Config path: `config.sidebar`

## Example

```ts
const viewer = new PDFViewer(container, doc, {
  sidebar: {
    pages: { defaultOpen: false },
    signatures: false,
    comments: { editing: false }, // a read-only review
  },
});
```

## Options (15)

### `rail`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/rail

The rail of tab buttons (a phone's tab row) and the panel's collapse / close button; `false` when your own chrome toggles the panels through [`openPanel()`](https://kernstra.com/docs/web-sdk/api/pdfviewer/openpanel).

```ts
toolbar: { layout: 'none' },
sidebar: { rail: false }, // your own Pages button, not ours beside it
```

### `pages`

- Type: `boolean | PagesPanelConfig`
- Default: `on, open where the sidebar pushes the document aside`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/pages

The Pages panel (thumbnails). `false` leaves it out; a `PagesPanelConfig` object sets whether it starts open and whether it carries a Manage pages button. The thumbnails' own page actions (rotate, move, duplicate, delete) follow [`tools.managePages`](https://kernstra.com/docs/web-sdk/config/tools/managepages) and need the `edit-pages` license feature.

```ts
sidebar: { pages: { defaultOpen: false } }
```

#### `pages.enabled`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/pages-enabled

Offer the Pages panel.

#### `pages.defaultOpen`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/pages-defaultopen

Start open where the sidebar pushes the document aside; it always starts closed as a drawer.

#### `pages.managePages`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/pages-managepages

A Manage pages button at the top of the panel, while the tool is on and the pages may change.

### `outline`

- Type: `boolean | EditablePanelConfig`
- Default: `on, with editing`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/outline

The Outline panel (bookmarks). Offered when the document has an outline or one can be made. Editing bookmarks needs the `edit-pages` license feature.

```ts
sidebar: { outline: { editing: false } }
```

#### `outline.enabled`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/outline-enabled

Offer the Outline panel.

#### `outline.editing`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/outline-editing

The panel's editing controls, in FULL mode when the document's permissions allow it and the license covers it (`edit-pages`).

### `attachments`

- Type: `boolean | EditablePanelConfig`
- Default: `on, with editing`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/attachments

The Attachments panel. Offered when the document has attachments or they can be made. Attaching and removing files needs the `edit-pages` license feature; downloading an attachment from the panel needs `extract`.

#### `attachments.enabled`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/attachments-enabled

Offer the Attachments panel.

#### `attachments.editing`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/attachments-editing

The panel's editing controls, in FULL mode when the document's permissions allow it and the license covers it (`edit-pages`).

### `signatures`

- Type: `boolean`
- Default: `on`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/signatures

The digital signatures the document declares (metadata, no validation). Offered when the document declares some.

```ts
sidebar: { signatures: false }
```

### `comments`

- Type: `boolean | EditablePanelConfig`
- Default: `on, with editing`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/comments

The Comments panel. Offered under every license — reading comments is viewing — and read-only without the `annotations` feature, which replying, editing, deleting and status need. `comments: { editing: false }` makes a read-only review. The selection bar's Comment action also needs this panel, editable.

```ts
sidebar: { comments: { editing: false } }
```

#### `comments.enabled`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/comments-enabled

Offer the Comments panel.

#### `comments.editing`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/sidebar/comments-editing

The panel's editing controls (a reply, an edit, a deletion, a review status), in FULL mode when the document's permissions allow it and the license covers it (`annotations`).

Web page: https://kernstra.com/docs/web-sdk/config/sidebar