Create a sidebar

Sidebars are located in the area to the right of the document view, and can be used alongside the document. This makes a sidebar useful for containing additional information about the document, metadata or different cross-sections of content - for example the structure view add-on. Besides the sidebars that come with Fonto out of the box, you can also create your own.

The sidebar is a React component. You can compose your own sidebar component using any number of Fonto Design System components and your own. There are also several FDS components designed specifically for common parts of a sidebar.

What you'll need

Step 1: Create a new package for the sidebar

Create a folder called “recipe-sidebar” in your packages/ directory. Your folder structure might look like this:

Folder structure
training-editor/
  packages/
    recipe-sidebar/

Step 2: Create the sidebar component

Create the file packages/recipe-sidebar/src/ui/RecipeSidebar.jsx

RecipeSidebar.jsx
import React from 'react';

import { Flex, SidebarHeader, SidebarInlay, Text } from 'fds/components';

export default function ExampleSidebar () {
    return (
        <Flex flex="1" flexDirection="column">
            <SidebarHeader title="Hello World!" />

            <SidebarInlay>
                <Text>Hello world</Text>
            </SidebarInlay>
         </Flex>
    );
}

Any React component will do, but most sidebars use the full available height as well as some common parts; a header and an inlay. The SidebarHeader and SidebarInlay provide a simple way to structure the contents of a sidebar. 

Step 3: Register the sidebar

Create packages/recipe-sidebar/src/install.js and use the registerEditorSidebarTab function as follows:

install.js
import registerEditorSidebarTab from 'fontoxml-editor/src/registerEditorSidebarTab.js';
import t from 'fontoxml-localization/src/t.js';

import RecipeSidebar from './ui/RecipeSidebar.jsx';

export default function install() {
    registerEditorSidebarTab({
        id: 'hello',
        icon: 'globe',
        label: t('Hello'),
        size: 'm',
        tooltipContent: t('Hello world'),
        Component: RecipeSidebar,
        priority: 0
    });
}

This code registers your React component to the list of sidebars that Fonto will initiate. The API reference for registerEditorSidebarTab also includes the identifiers and priorities used by Fonto’s out-of-the-box sidebars.

Step 4: Add the dependency

Add a reference to the “recipe-sidebar” package from config/fonto-manifest.json. At a minimum, it should contain:

fonto-manifest.json
{
    "dependencies": {
        "recipe-sidebar": "packages/recipe-sidebar"
    }
}

Final result


You’re now free to use any React component in FDS, your own components, and Fonto’s state managers to make your sidebar do something awesome.

The files that you’ve touched are:

Folder structure
training-editor/
  config/
    fonto-manifest.json
  packages/
    recipe-sidebar/
      src/
        ui/
          RecipeSidebar.jsx
        install.js


Was this page helpful?