Project Sidebar

Your primary means of navigation through your project is the sidebar located at the left hand side of the application. If you are on a mobile device or using a small screen, it might be hidden and can be revealed either via the button at the top left, or by swiping from the left side of the screen. In this article, we’ll take a look at how you can configure this sidebar to suit your project’s needs.

Layout

The project sidebar is split into three distinct sections:

• Project Information: this section houses the thumbnail image and name of your project as configured in the project settings. Here you’ll also find a status-chip showing the current sync status of your project. Should it ever turn red and be labelled with “Error” you’ll be able to see more details about the error by clicking it

• Custom Zone: this section is freely configurable by you as you will learn below

• Back Button: this final section, which is always at the bottom of the sidebar, houses the button that allows you to return to the home screen and switch to a different project. Some projects configured with an older version of Mattrbld might also show the entries for “Dashboard”, “Media Library”, and “Project Settings” here, more on that below

Sidebar Settings

In the Sidebar tab of the project settings, which you can quickly jump to by clicking the “Configure now” button in an unconfigured sidebar, you will find a list of entries, which can be rearranged and customised and have different types.

To create a new entry, simply type a label into the input field and hit Enter or click on the plus-button. The label you enter here will be the label that appears in the sidebar. All sidebar entries you create this way will have the “Heading” type by default, which simply creates a small heading in the sidebar, which you can then use to separate different sections from each other.

Alternatively, you can add a new entry without adding a label, which will cause the new entry to be of the “Separator” type. As the name implies, these entries are displayed as a thin line to separate different sections of the sidebar.

Clicking on your new entry will open its details in a panel on the right (or an overlay on small screens). Here you’ll be able to change its label, icon (if it’s not a heading), type, type specific settings and visibility.

Appearance

The appearance section houses options for changing the label and icon of a sidebar entry. These affect how the entry is displayed in the sidebar. You may choose any label and icon you like, but be aware that headings don’t support icons, which is why you won’t be able to choose one for those type of entries.

The appearance section is not shown for separator-type entries.

Functionality

This section dictates the behaviour of the entry when clicked. Here you’ll be able to select the type of the entry and adjust any options relating to that. The different types of entry are:

• Heading: a simple heading to separate entries from each other with no functionality on click

• Separator: a thin line to separate entries from each other, also with no functionality on click

• Collection: a link to a collection of content, for example a “Pages” or “Posts” collection. Clicking it will take the user straight to the Collection and allow them to edit its content

• Content item: a link to a specific piece of content, for example the “Home” page. Clicking it will take the user straight into the content editor for that specific item

• Document: a link to a Markdown document. Clicking it will take the user to a rendered view of that document. This can be used to provide documentation or other non-editable content for your collaborators

All types other than “Heading” or “Separator” require you to select a target. If you don’t do so, the entry will retain its “Heading” / “Separator” type until you do.

Visibility

In the visibility section, you can limit who will be able to see a particular entry based on their role. If the input field is empty, every member of the project will be able to see and interact with the entry. Otherwise only those with the specified role will be able to see it.

For entry types other than “Heading” and “Separator” you will also be able to activate a toggle to show the entry as a card on the dashboard, which can provide even quicker access to specific Collections, content items, or documents.

Please note that the entry for the Dashboard cannot be shown or hidden based on roles or as a card on the dashboard, as that would not make sense.

A Note for Legacy Projects

Projects configured before v1.0.0 will not have access to the three “System” type entries (Dashboard, Media Library, and Settings) in the sidebar settings. To enable them, they have to be manually added in the project’s config.json file in the .mattrbld directory:

"sidebar": [
  {
    "label": "Dashboard",
    "icon": "grid",
    "target": {
    "name": "Project"
    },
    "protected": true
  },
  {
    "label": "Media Library",
    "icon": "image-stack",
    "target": {
    "name": "Project.MediaLibrary"
    },
    "protected": true
  },
  {
    "label": "Settings",
    "icon": "settings",
    "target": {
    "name": "Project.Settings"
    },
    "onlyPrivileged": true,
    "protected": true
  }
  ]

Saving

All the settings you change will automatically be saved as long as they are valid. Once you’re done with configuring a sidebar entry, just close the panel or overlay and you’re done. You should also be able to see the changes you make live in the project sidebar itself.

To delete an entry, simply click the delete button next to it in the list.

On to the Dashboard

Just like the project sidebar, the dashboard offers a section that is configurable on a per-project basis. Read on to learn how it is structured and what you can change.