Layout

SideBar

Storybook

The SideBar component is a sidebar panel that displays a list of navigation items. It is useful for creating user interfaces with hierarchical navigation, where users can access different sections or pages within an application.

The sidebar consists of a header, a list of sidebar items, and an optional danger zone. The header displays the name and subtitle of the sidebar. The sidebar items represent the navigation options and can have dropdown sub-items. The danger zone provides an additional option with a warning icon for high-risk actions.

Import

1import { SideBar } from 'dd360-ds'

1import SideBar from 'dd360-ds/SideBar'

Usage

The SideBar component is highly customizable and adaptable to different use cases. It can show or hide items, expand or collapse the sidebar, and adjust the style and position as needed.

SideBarName

The prop sideBarName is required, it is a string that is rendered as the title of the SideBar component.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" />

SideBarSubTitle

A string that is rendered as the subtitle of the SideBar.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" sideBarSubTitle="Example SubTitle" />

SideBarList

A list of objects representing the sidebar options. Each object must have the same structure as shown in the following example:

• title (string, required): The title of the sidebar item.
• active (boolean, required): Indicates if the sidebar item is active.
• isOpen (boolean): Indicates if the sub-menu of the sidebar item is open.
• goTo (function): The callback function to be executed when the sidebar item is selected.
• icon (JSX.Element): The icon to be displayed next to the title of the sidebar item.
• disabled (boolean): Indicates if the sidebar item is disabled.
• hidden (boolean): Indicates if the sidebar item is hidden.
• subItems (SideBarSubItem): An object representing the sub-items of the sidebar item. Each property of the object should have a unique key and an object with the following properties:
• title (string, required): The title of the sub-item.
• active (boolean, required): Indicates if the sub-item is active.
• goTo (function): The callback function to be executed when the sub-item is selected.

Example:

1import { Sidebar } from "dd360-ds"
2import DynamicHeroIcon from "dd360-ds/DynamicHeroIcon"
3
4<SideBar
5  sideBarName="Sidebar"
6  sideBarList={[ 
7   { 
8     active: true,
9     icon: <DynamicHeroIcon icon="HomeIcon" />, 
10     title: "List 1", 
11     goTo: () => {}
12   }, 
13   {  
14    active: false, 
15    title: "List 2",
16    subItems: {
17     1: {
18      title: "SubItem 1",
19      active: false,
20      goTo: () => {}
21     },
22     2: {
23      title: "SubItem 2",
24      active: false,
25      goTo: () => {}
26     }
27    }
28   },
29   { 
30    active: false, 
31    disabled: true,
32    title: "List 3",
33    subItems: {
34     1: {
35      title: "SubItem 1",
36      active: false,
37      goTo: () => {}
38     },
39     2: {
40      title: "SubItem 2",
41      active: false,
42      goTo: () => {}
43     }
44    }
45   }
46  ]} 
47/>
48

DangerZone

An object representing the danger zone of the SideBar. The object must have the same structure as shown in the following example:

• show (boolean): Indicates if the danger zone is shown.
• text (string): The text to be displayed in the danger zone.
• active (boolean): Indicates if the danger zone is active.
• callBack (function): The callback function to be executed when the danger zone is selected.

Example:

1import { Sidebar } from "dd360-ds"
2
3<SideBar
4  sideBarName="Sidebar"
5  dangerZone={{
6    active: false,
7    show: true,
8    text: "Delete project"
9    callBack: () => {}
10  }} 
11/>
12

RenderBottomCmp

A render prop that allows you to use a fully custom element at the bottom of the SideBar. When using it alongside the dangerZone prop, the Danger Zone will be displayed below.

The expanded state of the SideBar is passed as an argument to the render prop, making it easy for you to adjust your component accordingly.

Example:

1import { Sidebar } from "dd360-ds"
2
3<SideBar
4  sideBarName="Sidebar"
5  renderBottomCmp={(isExpanded) => <CustomComponent isExpanded={isExpanded} />}
6/>

DisabledOptionsTag

A string representing the text to be displayed in the disabled options.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" disabledOptionsTag="Coming soon" />

IsLoadingHeaderInfo

A boolean which indicates when the header information is loading, while it is true Skeletons will be shown.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" IsLoadingHeaderInfo={true} />

IsLoadingSideBarList

A boolean indicating when the option listing information is being loaded, as long as it is true, the skeletons will be displayed.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" isLoadingSideBarList={true} />

NumSkeletons

Number of items of type skeletons to show when isLoadingSideBarList is true.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" isLoadingSideBarList={true} numSkeletons={5} />

DefaultExpand

A boolean representing whether the sidebar should be expanded by default.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" defaultExpand />

Top

Top position of the sidebar.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" top={80} />

Left

Left position of the sidebar.

1import { Sidebar } from "dd360-ds"
2
3<SideBar sideBarName="Sidebar" left={80} />

Example

1import { Sidebar } from "dd360-ds"
2
3<SideBar
4  sideBarName="Sidebar" 
5  sideBarSubTitle="Example Subtitle" 
6  defaultExpand={false}
7  flushSync={() => {}}
8  top={80}
9  left={260}
10  disabledOptionsTag="Coming soon" 
11  sideBarList={[ 
12   { 
13     active: true,
14     icon: <DynamicHeroIcon icon="HomeIcon" />, 
15     title: "List 1", 
16     goTo: () => {}
17   }, 
18   {  
19    active: false, 
20    title: "List 2", 
21    goTo: () => {} 
22   },
23   { 
24    active: false, 
25    disabled: true,
26    title: "List 3",
27    goTo: () => {}
28   }
29  ]} 
30  dangerZone={{
31    active: false,
32    show: true,
33    text: "Delete project"
34  }} 
35/>

API Reference