## Main application structure

Superdesk and its modules (Planning, Publisher, etc.) should share the same fundamental layout structure. This will guarantee a familiar experience and a shorter learning curve for users.

View Playground UI Playgrounds

### Table of contents

- Top bar
- Left side-bar
- Sub-navigation toolbar
- Left-side panel
- Main Content
- Right-side panel
- Bottom bar

### Top bar

A fixed bar that contains top-level navigation elements (e.g. activation button for the hamburger menu, title, desk dropdown, active user avatar etc.). In Superdesk most UI elements inside the top bar are persistent, only the title and the desk dropdown are contextual.

#### Examples

### Left side-bar

This is a persistent navigation menu consisting of icon buttons inside a fixed-width bar. It is for navigating the main user workspace, each button will open a specific screen inside the workspace. The content of the left side-bar can differ from user to user, as it is based on user rights and preferences. It will stay the same for a single user though, indicating only which screen is active.

#### Example

### Sub-navigation toolbar

Contextual navigation bar with various content options. Usually, it contains a diverse combination of button groups that control the content area below it. It is possible to have multiple levels of Sub-navigation toolbars on one page.

#### Examples

### Left-side panel

A closable panel that will push the main content area to the right when open. It is mostly used to contain advanced controls of the main content area (e.g. advanced search filters and similar).

#### Example

### Main Content area

The title explains it all - main content area. This is the place where the content is, which in most cases are different types of list or grid views.

#### Example

### Right-side panel

The right-side panel has a similar behaviour as the left-side panel with the difference that it appears at the right side. The opening is usually controlled from the items in the main content area whereas the closing is performed directly from the panel. Most commonly it is used as a detailed preview of content items. In some areas, it can also serve as an edit panel (eg. user management, parts of the Settings section).

#### Example

### Bottom bar

The bottom bar is a fixed bar that is present in the user workspace. Open items, the ones that the user is still working on, will appear there. It is possible to close or maximise individual items from the bar for editing.

#### Example