# layouts

Source: https://developers.inkdrop.app/states/layouts

An [app state](https://developers.inkdrop.app/guides/flux-architecture) of the layouts.
You can obtain the `layouts` state and integrate it with React components.

You can change the layout components with [Layout Manager](https://developers.inkdrop.app/modules/layout-manager).

---

## Data Structure

A map of `Record<string, LayoutComponents>` where:

- `string`: The layout name
- `LayoutComponents`: An array of React component class names

Get the `layouts` state manually:

```js
const { layouts } = env.store.getState()
```

Connect the state with your React component:

```js
import { useSelector } from 'react-redux'
const selector = ({ layouts }) => layouts
const MyComponent = props => {
  const layouts = useSelector(selector)
  // render
}
```

```js title="Example values"
{
  "main:full": [
    "ModalLayout",
    "SideBarLayout",
    "NoteListBarLayout",
    "EditorLayout"
  ],
  "main:slim": [
    "ModalLayout",
    "NoteListBarLayout",
    "EditorLayout"
  ],
  "main:distraction-free": [
    "ModalLayout",
    "EditorLayout"
  ],
  "sidebar": [
    ...
}
```

## Available Layouts

### `main:full`

The main layout that consists of 3 columns.

```json title="Default values"
[
  "ModalLayout",
  "SideBarLayout",
  "NoteListBarLayout",
  "EditorLayout"
]
```

### `main:slim`

The main layout that consists of 2 columns.

```json title="Default values"
[
  "ModalLayout",
  "NoteListBarLayout",
  "EditorLayout"
]
```

### `main:distraction-free`

The main layout for distraction-free mode.

```json title="Default values"
[
  "ModalLayout",
  "EditorLayout"
]
```

### `sidebar`

The sidebar layout

```json title="Default values"
[
  "SideBarHeader",
  "SideBarNavigation",
  "SideBarSyncStatusView",
  "SideBarPluginUpdatesNotificationView"
]
```

### `sidebar-menu`

The menu layout of sidebar

```json title="Default values"
[
  "SideBarMenuItemAllNotes",
  "SideBarMenuSectionNotebooks",
  "SideBarMenuBookListRoot",
  "SideBarMenuItemTrash",
  "SideBarMenuSectionStatus",
  "SideBarMenuStatusList",
  "SideBarMenuSectionTags",
  "SideBarMenuTagList"
]
```

### `sidebar-workspace-menu`

The menu layout of sidebar workspace menu

```json title="Default values"
[
  "SidebarWorkspaceMenuTitle",
  "SideBarWorkspaceMenuAllNotes",
  "SideBarMenuSectionNotebooks",
  "SideBarWorkspaceMenuBookList",
  "SideBarMenuSectionStatus",
  "SidebarWorkspaceMenuStatusList",
  "SideBarMenuSectionTags",
  "SidebarWorkspaceMenuTagList"
]
```

### `note-list-bar`

The menu layout of note list bar

```json title="Default values"
[
  "NoteListHeader",
  "NoteListSearchBar",
  "NoteListBarContainer"
]
```

### `note-list-bar:trash`

The trash menu layout of note list bar

```json title="Default values"
[
  "NoteListHeader",
  "NoteListBarContainer"
]
```

### `mde`

The mde layout

```json title="Default values"
[
  "Editor"
]
```

### `editor`

The editor layout

```json title="Default values"
[
  "EditorDrawer",
  "EditorFloatingActions",
  "EditorHeaderLayout",
  "EditorMetaLayout",
  "EditorToolbar",
  "MDELayout",
  "MDESearchBar",
  "EditorStatusBarLayout"
]
```

### `editor-header`

The header layout of the editor

```json title="Default values"
[
  "EditorHeaderTitleInput",
  "EditorHeaderMore"
]
```

### `editor-meta`

The meta pane layout of the editor

```json title="Default values"
[
  "EditorMetaNotebook",
  "EditorMetaStatusPicker",
  "EditorMetaTags"
]
```

### `modal`

The layout for modal components

```json title="Default values"
[
  "NewNotebookDialog",
  "DeleteNotebookDialog",
  "RenameNotebookDialog",
  "TagSettingsDialog",
  "DeleteTagDialog",
  "AssistiveErrorDialog",
  "MoveNotesDialog",
  "MoveNotebookDialog",
  "EmptyTrashDialog",
  "ShareNoteDialog",
  "NoteRevisionsDialog"
]
```

### `editor-toolbar`

The toolbar layout of the editor

```json title="Default values"
[]
```

### `editor-drawer-menu`

The editor drawer menu items

```json title="Default values"
[
  "EditorDrawerSectionHeaderNoteInformation",
  "EditorDrawerMenuItemNotebook",
  "EditorDrawerItemStatus",
  "EditorDrawerItemTags",
  "EditorDrawerItemCreatedDate",
  "EditorDrawerItemUpdatedDate",
  "EditorDrawerSeparator-1",
  "EditorDrawerSectionHeaderActions",
  "EditorDrawerActionButtonDuplicate",
  "EditorDrawerActionButtonCopyNoteLink",
  "EditorDrawerActionButtonPinToTop",
  "EditorDrawerActionButtonOpenNoteInSeparateWindow",
  "EditorDrawerSeparator-2",
  "EditorDrawerActionButtonDeleteNote",
  "EditorDrawerActionButtonRevisionHistory",
  "EditorDrawerSeparator-3",
  "EditorDrawerActionButtonShare"
]
```

### `editor-status-bar`

The status bar layout of the editor

```json title="Default values"
[]
```

### `editor-floating-actions`

The floating action buttons on the editor

```json title="Default values"
[
  "EditorFloatingActionTogglePreview",
  "EditorFloatingActionToggleSideBySide"
]
```