SidePanel

The side panel is the main navigation for the new Adjust platform design. In terms of visual hierarchy, it is on top of all other regular content or components on the page. Modal dialogs may overlay the side panel.

Example

Live Editor

function SidePanelExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [expandedSectionId, setExpandedSectionId] = useState('0');
  const [activeSectionId, setActiveSectionId] = useState('0');
  const [activeHeadlineId, setActiveHeadlineId] = useState('0');
  const [activeNavItemId, setActiveNavItemId] = useState('0');
  const [selectedLanguage, setSelectedLanguage] = useState('1');
  const [currentItemID, setCurrentItemID] = useState('');

  const onClick = (isExpanded) => {
  };

  const data = [
    {
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      id: '1',
      headlines: [
        {
          title: 'Reports',
          id: '1.1',
          type: 'headline',
          subMenu: [
            {
              id: '1.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '1.1.2',
              title: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '1.2',
          type: 'headline',
          subMenu: [
            {
              id: '1.2.1',
              title: 'Overview'
            },
            {
              id: '1.2.2',
              title: 'User acquisition'
            },
            {
              id: '1.2.3',
              title: 'Monetization'
            },
            {
              id: '1.2.4',
              title: 'SKAN'
            },
            {
              id: '1.2.5',
              title: 'Cohorts'
            },
            {
              id: '1.2.6',
              title: 'Fraud'
            },
            {
              id: '1.2.7',
              title: 'Assists'
            }
          ]
        }
      ]
    },
    {
      title: 'Pulse',
      brand: 'pulse',
      id: '2',
      headlines: [
        {
          title: 'All Pulses',
          id: '2.1',
          tooltipContent: 'New Pulse',
          type: 'plain'
        }
      ]
    },
    {
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      id: '3',
      headlines: [
        {
          title: 'Partners',
          id: '3.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '3.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '3.3',
          type: 'plain'
        }
      ]
    },
    {
      title: 'DataWorks',
      brand: 'dataworks',
      id: '4',
      headlines: [
        {
          title: 'Connections',
          id: '4.1',
          tooltipContent: 'New connection',
          type: 'plain'
        }
      ]
    },
    {
      title: 'AppView',
      brand: 'appview',
      id: '5',
      headlines: [
        {
          title: 'All Apps',
          id: '5.1',
          tooltipContent: 'New app',
          type: 'plain'
        },
        {
          title: 'SKAN Conversion Hub',
          id: '5.2',
          type: 'plain'
        },
        {
          title: 'CTV Apps*',
          id: '5.3',
          tooltipContent: 'New app',
          type: 'plain'
        }
      ]
    },
       {
      title: 'Action Center',
      brand: 'action_center',
      id: '6'
    }
  ];

  const languages = [
    {
      id: 1,
      value: 'English'
    },
    {
      id: 2,
      value: '简体中文'
    },
    {
      id: 3,
      value: '한국어'
    },
    {
      id: 4,
      value: 'Tiếng Việt'
    },
    {
      id: 5,
      value: 'Русский'
    },
    {
      id: 6,
      value: 'Português'
    },
    {
      id: 7,
      value: 'Español'
    },
    {
      id: 8,
      value: 'Türkçe'
    },
    {
      id: 9,
      value: '日本語'
    }
  ];

  const footerActions = [
    {
      id: 1,
      title: 'Help Center',
      icon: 'Question'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      notificationCount: 55,
      hasDropdown: true,
      dropdownContent: (
        <>
          <Tile>
            <div>Some example content</div>
          </Tile>
        </>
      )
    }
  ];

  const onToggle = (isExpanded) => {
    setIsExpanded(isExpanded);
  };

  const onToggleSidePanel = (isExpanded) => {
    setIsExpanded(isExpanded);
  };

  const onClickNavSection = (id, isExpanded) => {
    
    setExpandedSectionId(id);
  };

  const onClickHeadline = (id, type) => {
    setActiveHeadlineId(id);
    
    if (type && type === 'plain') {
      setActiveSectionId(id.substring(0, id.indexOf('.')));
    }
    setCurrentItemID(id);
  };

  const onClickNavItem = (id, type) => {
    setActiveNavItemId(id);
    setActiveSectionId(id.substring(0, id.indexOf('.')));
    setCurrentItemID(id);
  };

  const onClickLanguageItem = (languageId) => {
    return setSelectedLanguage(languageId);
  };

  const onClickTooltipAction = (id) => {

  };

  const onClickHeaderAction = () => {

  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            onToggle={onToggleSidePanel}
            onClickHeaderAction={onClickHeaderAction}
            footer={
              <SidePanel.Footer>
                <SidePanel.Account
                  name="Jason Olexander McQueen"
                  title="Very Long Company Name LLC"
                  action={<Button label="Change Account" size="small" />}
                  tooltipTitle="Account Settings"
                  footerActions={
                    <>
                      <Button
                        iconName="CogWheel"
                        iconAlignment="left"
                        label="Account Settings"
                        size="small"
                        css={{ marginRight: '14px' }}
                      />
                      <Button
                        iconName="LogOut"
                        iconAlignment="left"
                        label="Logout"
                        size="small"
                      />
                    </>
                  }
                >
                  <SidePanel.ActionMenuItem>
                    Account Setting
                  </SidePanel.ActionMenuItem>
                  <SidePanel.ActionMenuItem>
                    Change Account
                    <div>
                      <Text type="body2" css={{ marginBottom: 0 }}>
                        or press the ‘/’ key
                      </Text>
                    </div>
                  </SidePanel.ActionMenuItem>
                  <SidePanel.ActionMenuItem>Logout</SidePanel.ActionMenuItem>
                </SidePanel.Account>
                <SidePanel.LanguageSelector
                  activeLanguage="English"
                  tooltipTitle="Language"
                >
                  {languages.map((item, i) => {
                    return (
                      <SidePanel.LanguageItem
                        key={i}
                        id={item.id}
                        onClick={onClickLanguageItem}
                        isActive={item.id === selectedLanguage}
                      >
                        {item.value}
                      </SidePanel.LanguageItem>
                    );
                  })}
                </SidePanel.LanguageSelector>
                <SidePanel.FooterActions tooltipTitle="Help Center">
                  <>
                    {footerActions.map((item, i) => {
                      return (
                        <SidePanel.FooterActionItem
                          key={i}
                          id={item.id}
                          icon={item.icon}
                          value={item.title}
                          notificationCount={item.notificationCount}
                          hasDropdown={item.hasDropdown}
                          dropdownContent={item.dropdownContent}
                        />
                      );
                    })}
                  </>
                </SidePanel.FooterActions>
              </SidePanel.Footer>
            }
          >
            <SidePanel.Nav>
              {data.map((section, i) => {
                return (
                  <SidePanel.NavSection
                    dataTestId={`nav-section-${section.id}`}
                    onClick={onClickNavSection}
                    onMouseEnter={onClickNavSection}
                    id={section.id}
                    title={section.title}
                    brand={section.brand}
                    key={i}
                    isExpanded={section.id === activeSectionId}
                    isActive={section.id === activeSectionId}
                    notificationCount={section.notificationCount}
                  >
                    <>
                      {section.headlines && section.headlines.map((headline, i) => {
                        return (
                          <SidePanel.NavItem
                            type={headline.type}
                            id={headline.id}
                            key={i}
                            title={headline.title}
                            onClick={onClickHeadline}
                            isActive={headline.id === activeHeadlineId}
                          >
                            <>
                              {headline.subMenu
                                ? headline.subMenu.map((item, i) => {
                                    return (
                                      <SidePanel.NavItem
                                        onClick={onClickNavItem}
                                        id={item.id}
                                        key={i}
                                        title={item.title}
                                        tooltipContent={item.tooltipContent}
                                        onClickTooltipAction={
                                          onClickTooltipAction
                                        }
                                        isActive={item.id === activeNavItemId}
                                      />
                                    );
                                  })
                                : null}
                            </>
                          </SidePanel.NavItem>
                        );
                      })}
                    </>
                  </SidePanel.NavSection>
                );
              })}
            </SidePanel.Nav>
          </SidePanel>
        </div>
        <div
          style={{
            display: 'flex',
            paddingLeft: '50px',
            flexGrow: 1,
            flexDirection: 'column'
          }}
        >
          <Tile>
            <Text type="headline1">
              Nav item id: {currentItemID.toString()}
            </Text>
          </Tile>
        </div>
      </div>
    </>
  );
}

function SidePanelExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [expandedSectionId, setExpandedSectionId] = useState('0');
  const [activeSectionId, setActiveSectionId] = useState('0');
  const [activeHeadlineId, setActiveHeadlineId] = useState('0');
  const [activeNavItemId, setActiveNavItemId] = useState('0');
  const [selectedLanguage, setSelectedLanguage] = useState('1');
  const [currentItemID, setCurrentItemID] = useState('');

  const onClick = (isExpanded) => {
  };

  const data = [
    {
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      id: '1',
      headlines: [
        {
          title: 'Reports',
          id: '1.1',
          type: 'headline',
          subMenu: [
            {
              id: '1.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '1.1.2',
              title: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '1.2',
          type: 'headline',
          subMenu: [
            {
              id: '1.2.1',
              title: 'Overview'
            },
            {
              id: '1.2.2',
              title: 'User acquisition'
            },
            {
              id: '1.2.3',
              title: 'Monetization'
            },
            {
              id: '1.2.4',
              title: 'SKAN'
            },
            {
              id: '1.2.5',
              title: 'Cohorts'
            },
            {
              id: '1.2.6',
              title: 'Fraud'
            },
            {
              id: '1.2.7',
              title: 'Assists'
            }
          ]
        }
      ]
    },
    {
      title: 'Pulse',
      brand: 'pulse',
      id: '2',
      headlines: [
        {
          title: 'All Pulses',
          id: '2.1',
          tooltipContent: 'New Pulse',
          type: 'plain'
        }
      ]
    },
    {
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      id: '3',
      headlines: [
        {
          title: 'Partners',
          id: '3.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '3.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '3.3',
          type: 'plain'
        }
      ]
    },
    {
      title: 'DataWorks',
      brand: 'dataworks',
      id: '4',
      headlines: [
        {
          title: 'Connections',
          id: '4.1',
          tooltipContent: 'New connection',
          type: 'plain'
        }
      ]
    },
    {
      title: 'AppView',
      brand: 'appview',
      id: '5',
      headlines: [
        {
          title: 'All Apps',
          id: '5.1',
          tooltipContent: 'New app',
          type: 'plain'
        },
        {
          title: 'SKAN Conversion Hub',
          id: '5.2',
          type: 'plain'
        },
        {
          title: 'CTV Apps*',
          id: '5.3',
          tooltipContent: 'New app',
          type: 'plain'
        }
      ]
    },
       {
      title: 'Action Center',
      brand: 'action_center',
      id: '6'
    }
  ];

  const languages = [
    {
      id: 1,
      value: 'English'
    },
    {
      id: 2,
      value: '简体中文'
    },
    {
      id: 3,
      value: '한국어'
    },
    {
      id: 4,
      value: 'Tiếng Việt'
    },
    {
      id: 5,
      value: 'Русский'
    },
    {
      id: 6,
      value: 'Português'
    },
    {
      id: 7,
      value: 'Español'
    },
    {
      id: 8,
      value: 'Türkçe'
    },
    {
      id: 9,
      value: '日本語'
    }
  ];

  const footerActions = [
    {
      id: 1,
      title: 'Help Center',
      icon: 'Question'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      notificationCount: 55,
      hasDropdown: true,
      dropdownContent: (
        <>
          <Tile>
            <div>Some example content</div>
          </Tile>
        </>
      )
    }
  ];

  const onToggle = (isExpanded) => {
    setIsExpanded(isExpanded);
  };

  const onToggleSidePanel = (isExpanded) => {
    setIsExpanded(isExpanded);
  };

  const onClickNavSection = (id, isExpanded) => {
    
    setExpandedSectionId(id);
  };

  const onClickHeadline = (id, type) => {
    setActiveHeadlineId(id);
    
    if (type && type === 'plain') {
      setActiveSectionId(id.substring(0, id.indexOf('.')));
    }
    setCurrentItemID(id);
  };

  const onClickNavItem = (id, type) => {
    setActiveNavItemId(id);
    setActiveSectionId(id.substring(0, id.indexOf('.')));
    setCurrentItemID(id);
  };

  const onClickLanguageItem = (languageId) => {
    return setSelectedLanguage(languageId);
  };

  const onClickTooltipAction = (id) => {

  };

  const onClickHeaderAction = () => {

  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            onToggle={onToggleSidePanel}
            onClickHeaderAction={onClickHeaderAction}
            footer={
              <SidePanel.Footer>
                <SidePanel.Account
                  name="Jason Olexander McQueen"
                  title="Very Long Company Name LLC"
                  action={<Button label="Change Account" size="small" />}
                  tooltipTitle="Account Settings"
                  footerActions={
                    <>
                      <Button
                        iconName="CogWheel"
                        iconAlignment="left"
                        label="Account Settings"
                        size="small"
                        css={{ marginRight: '14px' }}
                      />
                      <Button
                        iconName="LogOut"
                        iconAlignment="left"
                        label="Logout"
                        size="small"
                      />
                    </>
                  }
                >
                  <SidePanel.ActionMenuItem>
                    Account Setting
                  </SidePanel.ActionMenuItem>
                  <SidePanel.ActionMenuItem>
                    Change Account
                    <div>
                      <Text type="body2" css={{ marginBottom: 0 }}>
                        or press the ‘/’ key
                      </Text>
                    </div>
                  </SidePanel.ActionMenuItem>
                  <SidePanel.ActionMenuItem>Logout</SidePanel.ActionMenuItem>
                </SidePanel.Account>
                <SidePanel.LanguageSelector
                  activeLanguage="English"
                  tooltipTitle="Language"
                >
                  {languages.map((item, i) => {
                    return (
                      <SidePanel.LanguageItem
                        key={i}
                        id={item.id}
                        onClick={onClickLanguageItem}
                        isActive={item.id === selectedLanguage}
                      >
                        {item.value}
                      </SidePanel.LanguageItem>
                    );
                  })}
                </SidePanel.LanguageSelector>
                <SidePanel.FooterActions tooltipTitle="Help Center">
                  <>
                    {footerActions.map((item, i) => {
                      return (
                        <SidePanel.FooterActionItem
                          key={i}
                          id={item.id}
                          icon={item.icon}
                          value={item.title}
                          notificationCount={item.notificationCount}
                          hasDropdown={item.hasDropdown}
                          dropdownContent={item.dropdownContent}
                        />
                      );
                    })}
                  </>
                </SidePanel.FooterActions>
              </SidePanel.Footer>
            }
          >
            <SidePanel.Nav>
              {data.map((section, i) => {
                return (
                  <SidePanel.NavSection
                    dataTestId={`nav-section-${section.id}`}
                    onClick={onClickNavSection}
                    onMouseEnter={onClickNavSection}
                    id={section.id}
                    title={section.title}
                    brand={section.brand}
                    key={i}
                    isExpanded={section.id === activeSectionId}
                    isActive={section.id === activeSectionId}
                    notificationCount={section.notificationCount}
                  >
                    <>
                      {section.headlines && section.headlines.map((headline, i) => {
                        return (
                          <SidePanel.NavItem
                            type={headline.type}
                            id={headline.id}
                            key={i}
                            title={headline.title}
                            onClick={onClickHeadline}
                            isActive={headline.id === activeHeadlineId}
                          >
                            <>
                              {headline.subMenu
                                ? headline.subMenu.map((item, i) => {
                                    return (
                                      <SidePanel.NavItem
                                        onClick={onClickNavItem}
                                        id={item.id}
                                        key={i}
                                        title={item.title}
                                        tooltipContent={item.tooltipContent}
                                        onClickTooltipAction={
                                          onClickTooltipAction
                                        }
                                        isActive={item.id === activeNavItemId}
                                      />
                                    );
                                  })
                                : null}
                            </>
                          </SidePanel.NavItem>
                        );
                      })}
                    </>
                  </SidePanel.NavSection>
                );
              })}
            </SidePanel.Nav>
          </SidePanel>
        </div>
        <div
          style={{
            display: 'flex',
            paddingLeft: '50px',
            flexGrow: 1,
            flexDirection: 'column'
          }}
        >
          <Tile>
            <Text type="headline1">
              Nav item id: {currentItemID.toString()}
            </Text>
          </Tile>
        </div>
      </div>
    </>
  );
}

Result

Sub Components

The navigation component is based on two sub-components (NavSection and NavItem) and is responsible for rendering Navigation items in the proper place with the proper styles.

NavSection

The NavSection component is used for rendering the first-level navigation elements.

Props:

Name	Type	Description
id	`string \| number`	Prop to provide a unique ID to the component.
title	`string`	Prop to provide nav section title value
brand	`"datascape" \| "pulse" \| "campaign_lab" \| "dataworks" \| "appview"`	Prop to provide a brand icon for the `NavSection`
dataTestId	`string`	Prop to provide to unique `data-testid`
children	`ReactNode`	Prop to provide to second and thirdlevel nav items. Please use only `NavItem` component as a child element.
isActive	`boolean`	Prop to define the item as the active item.
onClick	`(id: IDtype, isExpanded: boolean) => void`	A callback function to inform the parent component with the item id and expanded state on click
onMouseEnter	`(id: IDtype, isExpanded: boolean) => void`	A callback function to inform parent component with the item id and expanded state on mouse enter
expandWithHover	`boolean`	A boolean value to activate expanding on hover to item

NavItem

The NavItem component is used for rendering the first-level navigation elements.

Props:

Name	Type	Description
id	`string \| number`	Prop to provide a unique ID to the component.
title	`string`	Prop to provide nav section title value
brand	`"datascape" \| "pulse" \| "campaign_lab" \| "dataworks" \| "appview"`	Prop to provide nav section brand icon
dataTestId	`string`	Prop to provide to unique `data-testid`
children	`ReactNode`	Prop to provide to second and thirdlevel nav items. Please use only `NavItem` component as a child element.
isActive	`boolean`	Prop to define the item as the active item.
onClick	`(id: IDtype, isExpanded: boolean) => void`	A callback function to inform parent component with the item id and expanded state on click
expandWithHover	`boolean`	A boolean value to activate expanding on hover to item
type	`'headline' \| 'headline-labeled' \| 'plain'`	Prop to identify the type of the nav item.
tooltipContent	`string \| ReactNode`	Prop to display tooltip with the nav item

Account

The Account control component for the SidePanel.

Name	Type	Description
children	`ReactNode`	Prop to provide the items for the Account dropdown menu. Please use`ActionItem` component as child element
name	`string`	Prop to provide account name
title	`string`	Prop to provide title for the account name
action	`ReactNode`	Prop to provide action button for the account dropdown of expanded state of SidePanel
footerActions	`ReactNode`	Prop to provide action buttons for the account dropdown's footer of expanded state of SidePanel
tooltipTitle	`string`	Prop to provide the tooltip content
dataTestId	`string`	Prop to provide to unique `data-testid`
isActive	`boolean`	Prop to make account action items active

ActionMenu

The Action Menu is a component used for rendering items in the dropdown. To render the items in the action menu with the proper style, please use the ActionMenuItem sub-component within.

Name	Type	Description
icon	`IconName`	Prop to provide an icon as ActionMenu trigger.
dataTestId	`string`	Prop to provide to unique `data-testid`
children	`ReactNode`	Prop to provide the dropdown content for the Action Menu. To render the items in the action menu with the proper style, please use the ActionMenuItem sub-component
isActive	`boolean`	Prop to make ActionMenu opened
onToggle	`(isExpanded: boolean) => void`	A callback function to inform parent component with the item expanded state.
footer	`ReactNode`	The footer part of the action menu. You can provide a `Button` for this area. Please use only two buttons here, as in the example. And use only the Atlas Button component. This prop should be used only for the Account component content.
action	`ReactNode`	Prop to use an action button for the Account area dropdown content. Please use only the Atlas Button component shown in the example

ActionMenuItem

The Action Menu item is the sub component of SidePanel's ActionMenu. you can use the following props with the component.

Name	Type	Description
id	`string \| number`	Prop to provide a unique ID to the component.
isActive	`boolean`	Prop to define the item as the active item.
icon	`IconName`	Prop to add icon to action menu item
onClick	`(id: IDtype) => void`	A callback function to inform parent component with the clicked item id.
children	`ReactNode`	Item content

LanguageSelector

The Language selector component for the SidePanel.

Name	Type	Description
children	`ReactNode`	Prop to provide the item content
activeLanguage	`string`	Prop to provide the selected language value.
dataTestId	`string`	Prop to provide to unique `data-testid` default:`sidepanel-language-selector`
tooltipTitle	`string`	Prop to provide the tooltip content

LanguageItem

The Language selector item sub component

Name	Type	Description
children	`ReactNode`	Prop to provide the item content
dataTestId	`string`	Prop to provide to unique `data-testid` default:`sidepanel-language-selector`
isActive	`boolean`	Prop to define the item as the active item.
onClick	`(id: IDtype) => void`	A callback function to inform parent component with the clicked item id.

FooterActions

A component renders the actions in the SidePanel's footer area.

Name	Type	Description
children	`ReactNode`	Prop to provide the item content
tooltipTitle	`string`	Prop to provide the tooltip content
onToggleFooterActionMenu	`(isVisible: boolean) => void`	A callback function to inform parent component with the footer action expand/collapse state.
dataTestId	`string`	Prop to provide to unique `data-testid`

FooterActionItem

A component renders an IconButton action item in the footer area.

Name	Type	Description
children	`ReactNode`	Prop to provide the item content
isActive	`boolean`	Prop to define the item as the active item.
icon	`IconName`	Prop to define the icon for action item.
value	`string`	Prop to define title for action item.
onClick	`(id?: IDtype) => void`	A callback function to inform parent component with the clicked item id
dataTestId	`string`	Prop to provide to unique `data-testid`
notificationCount	`number`	Prop to provide to notification count and badge to action item. Please use only with the Resource Center action.
dropdownContent	`ReactNode`	Prop to provide dropdown to footer action item. Please use only with the Resource Center action.

Props

Name	Type	Default
onToggle	((isOpen: boolean) => void)	—
isOpen	boolean	—
onClickHeaderAction	(() => void)	—
footer	ReactNode	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Example​

Sub Components​

NavSection​

Props:​

NavItem​

Props:​

Account​

ActionMenu​

ActionMenuItem​

LanguageSelector​

LanguageItem​

FooterActions​

FooterActionItem​

Props​

Example

Sub Components

NavSection

Props:

NavItem

Props:

Account

ActionMenu

ActionMenuItem

LanguageSelector

LanguageItem

FooterActions

FooterActionItem

Props