ToolsSidePanel

ToolsSidePanel in Storybook

Examples

Check out the Usage section for details about how to design a ToolsSidePanel properly, and the different configuration options we provide.

Basic example

A ToolsSidePanel component is a wrapper that will designate which components make up a pair of panels on the right side of the window. The ToolsSidePanel takes up to two child components: ToolsSidePanelContent and ToolsSidePanelBar. The ToolsSidePanelContent component renders a wider panel that can be collapsed using a button.

In this example, the React useState hook is used to manage the collapsed state of the ToolsSidePanelContent.

const [collapsed, setCollapsed] = useState<boolean>(false);

<ToolsSidePanel onCollapsedChange={setCollapsed} collapsed={collapsed} className={styles.layoutSamples}>
    <ToolsSidePanelContent>
        <p>Sample side panel text</p>
    </ToolsSidePanelContent>
    <ToolsSidePanelBar>
        <HomeIcon/> {/* Home icon imported from '@jutro/icons' */}
    </ToolsSidePanelBar>
</ToolsSidePanel>

Usage

Overview

The tools side panel is a collapsible panel located on the right side of the screen. It provides users with additional tools, settings, or contextual information without disrupting their primary workflow. This panel is designed to enhance productivity by offering quick access to key actions and resources.

When to use

• Users need quick access to controls without leaving the main content area.
• The panel contains adjustable settings that impact the current view.
• The panel serves as a contextual assistant, offering relevant options based on user selection.

When not to use

• The actions inside are primary and need to be part of the main UI.
• The panel contains too many complex options, making it overwhelming for users.
• Users need to complete multi-step actions that require full attention (consider using a modal instead).
• The panel conflicts with other UI elements, leading to poor usability.

Anatomy

1. Panel container: The main structure that contains all the components of the side panel.
2. Tool items: The panel consists of icons without text labels.
3. Collapsible icon button: An arrow button that allows users to expand or collapse the panel.

Not all elements are required. Include only what is necessary for your specific use case. The tools side panel is an open and flexible panel that can accommodate various elements based on specific use cases. Teams can customize it by adding different components, tools, and functionalities as needed while maintaining a streamlined experience.

Behavior

• Appears on the right side of the screen and spans from the header to the bottom of the page.
• Can be collapsible or persistent, depending on the application’s needs.
• Pushes the content rather than overlaying it, ensuring a clear and structured layout.
• Provides quick access to tools, or contextual actions without disrupting the main workflow.

Related elements

• Header
• Subheader
• Side panel
• Footer

Code

const [collapsed, setCollapsed] = useState<boolean>(false);

<ToolsSidePanel onCollapsedChange={setCollapsed} collapsed={collapsed} className={styles.layoutSamples}>
    <ToolsSidePanelContent>
        <p>Sample side panel text</p>
    </ToolsSidePanelContent>
    <ToolsSidePanelBar>
        <HomeIcon/> {/* Home icon imported from '@jutro/icons' */}
    </ToolsSidePanelBar>
</ToolsSidePanel>

Import statement

import { ToolsSidePanel, ToolsSidePanelContent, ToolsSidePanelBar } from '@jutro/components';

Component contract

Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.

Properties

ToolsSidePanel Properties

childrenrequired

Type

node[]

Description

Content of the ToolsSidePanel. These must be ToolsSidePanelContent and/or ToolsSidePanelBar components.

className

Type

string

Description

CSS class name for this component.

collapsed

Type

boolean

Description

If set to true, the ToolsSidePanelContent child component is collapsed.

hideCollapseButton

Type

boolean

Description

If set to true, the collapse button is not rendered.

onCollapsedChange

Type

(collapsed: boolean) => void

Description

A callback invoked when the collapse button is clicked.

ToolsSidePanelContent Properties

childrenrequired

Type

node

Description

Content of the ToolsSidePanelContent component.

ToolsSidePanelBar Properties

childrenrequired

Type

node

Description

Content of the ToolsSidePanelBar.

Hooks

No hooks are available for ToolsSidePanel.

Translation keys

There are two translation keys associated to the ToolsSidePanel component:

Key	Used for
jutro-components.layout.ToolsSidePanel.collapseButton	aria-label value when clicking the button would collapse the ToolsSidePanel
jutro-components.layout.ToolsSidePanel.expandButton	aria-label value when clicking the button would expand the ToolsSidePanel

Escape hatches

For more information, see our documentation about escape hatches.

Changelog

Changelog

10.10.0

ToolsSidePanel component added.