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 [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);

  const data = [
    {
      id: '1',
      title: 'Home',
      brand: 'homeview',
      type: 'plain'
    },
    {
      id: '2',
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      headlines: [
        {
          title: 'Reports',
          id: '2.1',
          type: 'headline',
          subMenu: [
            {
              id: '2.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '2.1.2',
              title: 'Skan',
              href: 'https://www.google.com/',
              target: '_blank',
              tooltipContent: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '2.2',
          type: 'headline',
          subMenu: [
            {
              id: '2.2.1',
              title: 'Overview'
            },
            {
              id: '2.2.2',
              title: 'User acquisition'
            },
            {
              id: '2.2.3',
              title: 'Monetization'
            },
            {
              id: '2.2.4',
              title: 'SKAN'
            },
            {
              id: '2.2.5',
              title: 'Cohorts',
              disabled: true
            },
            {
              id: '2.2.6',
              title: 'Fraud',
              disabled: true
            },
            {
              id: '2.2.7',
              title: 'Assists',
              disabled: true
            }
          ]
        }
      ]
    },
    {
      id: '3',
      title: 'Pulse',
      brand: 'pulse',
      headlines: [
        {
          title: 'All Pulses',
          id: '3.1',
          tooltipContent: 'New Pulse',
          type: 'plain',
          disabled: true
        }
      ]
    },
    {
      id: '4',
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      headlines: [
        {
          title: 'Partners',
          id: '4.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '4.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '4.3',
          type: 'plain'
        }
      ]
    },
    {
      id: '5',
      title: 'Protection',
      brand: 'protection',
      headlines: [
        {
          title: 'Conversion rules',
          id: '5.1',
          type: 'plain'
        }
      ]
    },
    {
      id: '6',
      title: 'DataWorks',
      brand: 'dataworks',
      headlines: [
        {
          title: 'Connections',
          id: '6.1',
          type: 'plain',
          href: 'https://www.google.com/',
          target: '_blank'
        }
      ]
    },
    {
      id: '7',
      title: 'AppView',
      brand: 'appview',
      headlines: [
        {
          title: 'All Apps',
          id: '7.1',
          tooltipContent: 'New app',
          type: 'plain'
        },
        {
          title: 'SKAN Conversion Hub',
          id: '7.2',
          type: 'plain'
        },
        {
          title: 'CTV Apps*',
          id: '7.3',
          tooltipContent: 'New app',
          type: 'plain'
        }
      ]
    },
    {
      id: '8',
      title: 'Action Center',
      brand: 'action_center',
      type: 'plain',
      href: 'https://www.google.com/',
      target: '_blank'
    }
  ];

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const onClickNavSection = (id, isExpanded) => {
    if (id === '1') setCurrentItemID(id);
    else 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);
    console.log('onClickNavItem', id);
  };

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

  const onClickToAction = (id) => {
    console.log('onClickToAction', id);
  };

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
          >
            <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}
                    type={section.type}
                    {...section}
                  >
                    <>
                      {section.headlines &&
                        section.headlines.map((headline, i) => {
                          return (
                            <SidePanel.NavItem
                              type={headline.type}
                              id={headline.id}
                              key={i}
                              title={headline.title}
                              onClick={onClickHeadline} // link item still invoke onClick event.
                              isActive={headline.id === activeHeadlineId}
                              isDisabled={headline.disabled}
                              {...headline} // href, target, to ...
                            >
                              <>
                                {headline.subMenu
                                  ? headline.subMenu.map((item, i) => {
                                      return (
                                        <SidePanel.NavItem
                                          id={item.id}
                                          key={i}
                                          title={item.title}
                                          tooltipContent={item.tooltipContent}
                                          isActive={item.id === activeNavItemId}
                                          onClick={onClickNavItem}
                                          onClickToAction={onClickToAction}
                                          isDisabled={item.disabled}
                                          {...item} // href, target, to ...
                                        />
                                      );
                                    })
                                  : null}
                              </>
                            </SidePanel.NavItem>
                          );
                        })}
                    </>
                  </SidePanel.NavSection>
                );
              })}
            </SidePanel.Nav>
            <SidePanel.Footer>
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Account Setting
                </SidePanel.MenuItem>
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Logout
                </SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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 [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);

  const data = [
    {
      id: '1',
      title: 'Home',
      brand: 'homeview',
      type: 'plain'
    },
    {
      id: '2',
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      headlines: [
        {
          title: 'Reports',
          id: '2.1',
          type: 'headline',
          subMenu: [
            {
              id: '2.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '2.1.2',
              title: 'Skan',
              href: 'https://www.google.com/',
              target: '_blank',
              tooltipContent: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '2.2',
          type: 'headline',
          subMenu: [
            {
              id: '2.2.1',
              title: 'Overview'
            },
            {
              id: '2.2.2',
              title: 'User acquisition'
            },
            {
              id: '2.2.3',
              title: 'Monetization'
            },
            {
              id: '2.2.4',
              title: 'SKAN'
            },
            {
              id: '2.2.5',
              title: 'Cohorts',
              disabled: true
            },
            {
              id: '2.2.6',
              title: 'Fraud',
              disabled: true
            },
            {
              id: '2.2.7',
              title: 'Assists',
              disabled: true
            }
          ]
        }
      ]
    },
    {
      id: '3',
      title: 'Pulse',
      brand: 'pulse',
      headlines: [
        {
          title: 'All Pulses',
          id: '3.1',
          tooltipContent: 'New Pulse',
          type: 'plain',
          disabled: true
        }
      ]
    },
    {
      id: '4',
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      headlines: [
        {
          title: 'Partners',
          id: '4.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '4.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '4.3',
          type: 'plain'
        }
      ]
    },
    {
      id: '5',
      title: 'Protection',
      brand: 'protection',
      headlines: [
        {
          title: 'Conversion rules',
          id: '5.1',
          type: 'plain'
        }
      ]
    },
    {
      id: '6',
      title: 'DataWorks',
      brand: 'dataworks',
      headlines: [
        {
          title: 'Connections',
          id: '6.1',
          type: 'plain',
          href: 'https://www.google.com/',
          target: '_blank'
        }
      ]
    },
    {
      id: '7',
      title: 'AppView',
      brand: 'appview',
      headlines: [
        {
          title: 'All Apps',
          id: '7.1',
          tooltipContent: 'New app',
          type: 'plain'
        },
        {
          title: 'SKAN Conversion Hub',
          id: '7.2',
          type: 'plain'
        },
        {
          title: 'CTV Apps*',
          id: '7.3',
          tooltipContent: 'New app',
          type: 'plain'
        }
      ]
    },
    {
      id: '8',
      title: 'Action Center',
      brand: 'action_center',
      type: 'plain',
      href: 'https://www.google.com/',
      target: '_blank'
    }
  ];

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const onClickNavSection = (id, isExpanded) => {
    if (id === '1') setCurrentItemID(id);
    else 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);
    console.log('onClickNavItem', id);
  };

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

  const onClickToAction = (id) => {
    console.log('onClickToAction', id);
  };

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
          >
            <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}
                    type={section.type}
                    {...section}
                  >
                    <>
                      {section.headlines &&
                        section.headlines.map((headline, i) => {
                          return (
                            <SidePanel.NavItem
                              type={headline.type}
                              id={headline.id}
                              key={i}
                              title={headline.title}
                              onClick={onClickHeadline} // link item still invoke onClick event.
                              isActive={headline.id === activeHeadlineId}
                              isDisabled={headline.disabled}
                              {...headline} // href, target, to ...
                            >
                              <>
                                {headline.subMenu
                                  ? headline.subMenu.map((item, i) => {
                                      return (
                                        <SidePanel.NavItem
                                          id={item.id}
                                          key={i}
                                          title={item.title}
                                          tooltipContent={item.tooltipContent}
                                          isActive={item.id === activeNavItemId}
                                          onClick={onClickNavItem}
                                          onClickToAction={onClickToAction}
                                          isDisabled={item.disabled}
                                          {...item} // href, target, to ...
                                        />
                                      );
                                    })
                                  : null}
                              </>
                            </SidePanel.NavItem>
                          );
                        })}
                    </>
                  </SidePanel.NavSection>
                );
              })}
            </SidePanel.Nav>
            <SidePanel.Footer>
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Account Setting
                </SidePanel.MenuItem>
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem onClick={() => setIsAccountMenuOpen(false)}>
                  Logout
                </SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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

Variant

Agency Users

AgencyUser renders menu action of Agency User. It includes 2 sub component: MenuHeader and MenuItem

Live Editor

function SidePanelExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState('1');
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const companyItems = [
    { id: '1', label: 'Another company', icon: 'Camera' },
    { id: '2', label: 'Blue company', icon: 'Bell' },
    { id: '3', label: 'Delta company', icon: 'Clock' }
  ];

  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);

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

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
          >
            <SidePanel.AgencyUser
              title={
                companyItems.find((item) => item.id === currentItemID).label
              }
              tooltipTitle="Select a client’s account to view their data."
              onToggleMenu={(isVisible) =>
                console.log('is AgencyUser menu opened', isVisible)
              }
            >
              <SidePanel.MenuHeader>
                <Input
                  aria-label="Search"
                  type="search"
                  placeholder="Search"
                  css={{ width: '100%' }}
                />
              </SidePanel.MenuHeader>
              {companyItems.map((item, i) => {
                return (
                  <SidePanel.MenuItem
                    key={i}
                    id={item.id}
                    isActive={item.id === currentItemID}
                    onClick={() => setCurrentItemID(item.id)}
                  >
                    {item.label}
                  </SidePanel.MenuItem>
                );
              })}
            </SidePanel.AgencyUser>
            <SidePanel.Footer>
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem>Account Setting</SidePanel.MenuItem>
                <SidePanel.MenuItem>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem>Logout</SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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 [selectedLanguage, setSelectedLanguage] = useState('1');
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const companyItems = [
    { id: '1', label: 'Another company', icon: 'Camera' },
    { id: '2', label: 'Blue company', icon: 'Bell' },
    { id: '3', label: 'Delta company', icon: 'Clock' }
  ];

  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);

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

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
          >
            <SidePanel.AgencyUser
              title={
                companyItems.find((item) => item.id === currentItemID).label
              }
              tooltipTitle="Select a client’s account to view their data."
              onToggleMenu={(isVisible) =>
                console.log('is AgencyUser menu opened', isVisible)
              }
            >
              <SidePanel.MenuHeader>
                <Input
                  aria-label="Search"
                  type="search"
                  placeholder="Search"
                  css={{ width: '100%' }}
                />
              </SidePanel.MenuHeader>
              {companyItems.map((item, i) => {
                return (
                  <SidePanel.MenuItem
                    key={i}
                    id={item.id}
                    isActive={item.id === currentItemID}
                    onClick={() => setCurrentItemID(item.id)}
                  >
                    {item.label}
                  </SidePanel.MenuItem>
                );
              })}
            </SidePanel.AgencyUser>
            <SidePanel.Footer>
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem>Account Setting</SidePanel.MenuItem>
                <SidePanel.MenuItem>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem>Logout</SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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

Loading & Error state

Side Panel supports loading state with prop isLoading in NavSection sub component. And it also supports to display a badge for error messages if any problems happen with ErrorState sub component in footer area.

Live Editor

function SidePanelExample() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [selectedLanguage, setSelectedLanguage] = useState('1');
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);
  const [currentItemID, setCurrentItemID] = useState('');

  const data = [
    {
      id: '1',
      title: 'Home',
      brand: 'homeview',
      type: 'plain'
    },
    {
      id: '2',
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      headlines: [
        {
          title: 'Reports',
          id: '2.1',
          type: 'headline',
          subMenu: [
            {
              id: '2.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '2.1.2',
              title: 'Skan',
              href: 'https://www.google.com/',
              target: '_blank',
              tooltipContent: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '2.2',
          type: 'headline',
          subMenu: [
            {
              id: '2.2.1',
              title: 'Overview'
            },
            {
              id: '2.2.2',
              title: 'User acquisition'
            },
            {
              id: '2.2.3',
              title: 'Monetization'
            },
            {
              id: '2.2.4',
              title: 'SKAN'
            },
            {
              id: '2.2.5',
              title: 'Cohorts',
              disabled: true
            },
            {
              id: '2.2.6',
              title: 'Fraud',
              disabled: true
            },
            {
              id: '2.2.7',
              title: 'Assists',
              disabled: true
            }
          ]
        }
      ]
    },
    {
      id: '3',
      title: 'Pulse',
      brand: 'pulse',
      headlines: [
        {
          title: 'All Pulses',
          id: '3.1',
          tooltipContent: 'New Pulse',
          type: 'plain',
          disabled: true
        }
      ]
    },
    {
      id: '4',
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      headlines: [
        {
          title: 'Partners',
          id: '4.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '4.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '4.3',
          type: 'plain'
        }
      ]
    },
    {
      id: '5',
      title: 'Protection',
      brand: 'protection',
      headlines: [
        {
          title: 'Conversion rules',
          id: '5.1',
          type: 'plain'
        }
      ]
    }
  ];

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

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

  const errorStateProps = {
    tooltip: 'Your account has no permission, please contact Admin.'
  };

  const [isToggleTooltipOpen, setIsToggleTooltipOpen] = useState(false);

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
            isLoading={true}
          >
            <SidePanel.Nav>
              {data.map((section, i) => {
                return (
                  <SidePanel.NavSection
                    dataTestId={`nav-section-${section.id}`}
                    id={section.id}
                    title={section.title}
                    brand={section.brand}
                    notificationCount={section.notificationCount}
                    key={i}
                    type={section.type}
                    {...section}
                  />
                );
              })}
            </SidePanel.Nav>
            <SidePanel.Footer>
              <SidePanel.ErrorState {...errorStateProps} />
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem>Account Setting</SidePanel.MenuItem>
                <SidePanel.MenuItem>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem>Logout</SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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 [selectedLanguage, setSelectedLanguage] = useState('1');
  const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
  const [isFooterMenuOpen, setIsFooterMenuOpen] = useState(false);
  const [currentItemID, setCurrentItemID] = useState('');

  const data = [
    {
      id: '1',
      title: 'Home',
      brand: 'homeview',
      type: 'plain'
    },
    {
      id: '2',
      title: 'Datascape',
      brand: 'datascape',
      notificationCount: 5,
      headlines: [
        {
          title: 'Reports',
          id: '2.1',
          type: 'headline',
          subMenu: [
            {
              id: '2.1.1',
              title: 'All Reports',
              tooltipContent: 'New Report'
            },
            {
              id: '2.1.2',
              title: 'Skan',
              href: 'https://www.google.com/',
              target: '_blank',
              tooltipContent: 'Skan'
            }
          ]
        },
        {
          title: 'Dashboards',
          id: '2.2',
          type: 'headline',
          subMenu: [
            {
              id: '2.2.1',
              title: 'Overview'
            },
            {
              id: '2.2.2',
              title: 'User acquisition'
            },
            {
              id: '2.2.3',
              title: 'Monetization'
            },
            {
              id: '2.2.4',
              title: 'SKAN'
            },
            {
              id: '2.2.5',
              title: 'Cohorts',
              disabled: true
            },
            {
              id: '2.2.6',
              title: 'Fraud',
              disabled: true
            },
            {
              id: '2.2.7',
              title: 'Assists',
              disabled: true
            }
          ]
        }
      ]
    },
    {
      id: '3',
      title: 'Pulse',
      brand: 'pulse',
      headlines: [
        {
          title: 'All Pulses',
          id: '3.1',
          tooltipContent: 'New Pulse',
          type: 'plain',
          disabled: true
        }
      ]
    },
    {
      id: '4',
      title: 'Campaign Lab',
      brand: 'campaign_lab',
      headlines: [
        {
          title: 'Partners',
          id: '4.1',
          tooltipContent: 'New Partner',
          type: 'plain'
        },
        {
          title: 'Custom links',
          id: '4.2',
          tooltipContent: 'New link',
          type: 'plain'
        },
        {
          title: 'Smart Banners',
          id: '4.3',
          type: 'plain'
        }
      ]
    },
    {
      id: '5',
      title: 'Protection',
      brand: 'protection',
      headlines: [
        {
          title: 'Conversion rules',
          id: '5.1',
          type: 'plain'
        }
      ]
    }
  ];

  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',
      tooltipTitle: 'Help Center'
    },
    {
      id: 2,
      title: 'Resource Center',
      icon: 'Megaphone',
      tooltipTitle: 'Resource Center'
    }
  ];

  const onClickHeaderAction = () => {
    console.log('onClickHeaderAction');
  };
  const onClickLogo = () => {
    console.log('onClickLogo');
  };

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

  const errorStateProps = {
    tooltip: 'Your account has no permission, please contact Admin.'
  };

  const [isToggleTooltipOpen, setIsToggleTooltipOpen] = useState(false);

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <div>
          <SidePanel
            isOpen={isExpanded}
            onToggleButtonClick={(isOpen) => setIsExpanded(!isOpen)}
            onClickHeaderAction={onClickHeaderAction}
            onClickLogo={onClickLogo}
            headerActionTooltip={
              <>
                Open shortcuts <b>(Cmd + k)</b>
              </>
            }
            toggleButtonTooltip={
              isExpanded ? 'Collapse side panel' : 'Expand side panel'
            }
            isLoading={true}
          >
            <SidePanel.Nav>
              {data.map((section, i) => {
                return (
                  <SidePanel.NavSection
                    dataTestId={`nav-section-${section.id}`}
                    id={section.id}
                    title={section.title}
                    brand={section.brand}
                    notificationCount={section.notificationCount}
                    key={i}
                    type={section.type}
                    {...section}
                  />
                );
              })}
            </SidePanel.Nav>
            <SidePanel.Footer>
              <SidePanel.ErrorState {...errorStateProps} />
              <SidePanel.Account
                userName="Jason Olexander McQueen"
                accountName="Very Long Company Name LLC"
                action={
                  <Button
                    label="Change Account"
                    size="small"
                    onClick={() => setIsAccountMenuOpen(false)}
                  />
                }
                tooltipTitle="Account Settings"
                isActionMenuOpen={isAccountMenuOpen}
                onClickButton={(isVisible) => setIsAccountMenuOpen(!isVisible)}
                footerActions={
                  <>
                    <Button
                      iconName="CogWheel"
                      iconAlignment="left"
                      label="Account Settings"
                      size="small"
                      css={{ marginRight: '14px' }}
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                    <Button
                      iconName="LogOut"
                      iconAlignment="left"
                      label="Logout"
                      size="small"
                      onClick={() => setIsAccountMenuOpen(false)}
                    />
                  </>
                }
              >
                <SidePanel.MenuItem>Account Setting</SidePanel.MenuItem>
                <SidePanel.MenuItem>
                  Change Account
                  <div>
                    <Text type="body2" css={{ marginBottom: 0 }}>
                      or press the ‘/’ key
                    </Text>
                  </div>
                </SidePanel.MenuItem>
                <SidePanel.MenuItem>Logout</SidePanel.MenuItem>
              </SidePanel.Account>
              <SidePanel.LanguageSelector
                activeLanguage={
                  languages.find((item) => item.id === selectedLanguage).value
                }
                tooltipTitle="Language"
              >
                {languages.map((item, i) => {
                  return (
                    <SidePanel.MenuItem
                      key={i}
                      id={item.id}
                      onClick={onClickLanguageItem}
                      isActive={item.id === selectedLanguage}
                    >
                      {item.value}
                    </SidePanel.MenuItem>
                  );
                })}
              </SidePanel.LanguageSelector>
              <SidePanel.FooterActions
                tooltipTitle="Help Center"
                isActionMenuOpen={isFooterMenuOpen}
                onClickButton={(isVisible) => setIsFooterMenuOpen(!isVisible)}
              >
                <>
                  {footerActions.map((item, i) => {
                    return (
                      <SidePanel.FooterActionItem
                        key={i}
                        id={item.id}
                        icon={item.icon}
                        tooltipTitle={item.tooltipTitle}
                        onClick={() => {
                          item.id === 1 && setIsFooterMenuOpen(false);
                        }}
                      >
                        {item.title}
                      </SidePanel.FooterActionItem>
                    );
                  })}
                </>
              </SidePanel.FooterActions>
            </SidePanel.Footer>
          </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.

Name	Type	Description
id	string	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
isActive	boolean	Prop to define the active section.
isExpanded	boolean	Prop to define the expanded state.
isDisabled	boolean	Prop to define the disabled section.
notificationCount	number	Prop to define the notification badge.
as	ElementType	Prop to allow external link component, such as: react-router-dom Link
to	string, object	Prop to define the path of external link component
onClick	`(id: IDtype, isExpanded: boolean) => void`	A callback function to inform the parent component with the item id and expanded state on click
dataTestId	string	Prop to provide to unique `data-testid`
children	ReactNode	Prop to provide to second and third level nav items. Please use only `NavItem` component as a child element.

NavItem

The NavItem component is used for rendering the navigation items.

Name	Type	Description
id	string	Prop to provide a unique ID to the component.
type	`'headline', headline-labeled', 'plain'`	Prop to identify the type of the nav item.
title	string	Prop to provide item's title value.
isActive	boolean	Prop to define the active item.
isDisabled	boolean	Prop to define the disabled item.
tooltipContent	`string, ReactNode`	Prop to define the item as the active item.
as	ElementType	Prop to allow external link component, such as: react-router-dom Link
to	string, object	Prop to define the path of external link component
onClick	`(id: IDtype, type?: NavItemType) => void`	A callback function to inform the parent component with the item id and the type of item
onClickToAction	`(id: IDtype) => void`	A callback function to inform parent component with the item id on icon button (plus icon)
children	ReactNode	Prop to provide to second and third level nav items. Please use only `NavItem` component as a child element.
dataTestId	string	Prop to provide to unique `data-testid` to item
actionDataTestId	string	Prop to provide to unique `data-testid` to action button

NavItem can be set as a link item:

Anchor element (default) by adding its attributes such as href, target, ...
External link component (e.g react-router-dom) by adding as and its attributes such as to, replace, ...

note

As default onClick and onClickToAction are still invoked when the link item is clicked. If not expectation, please handle these events by yourself (see above example)

import { Link } from 'react-router-dom';

const navItems = [
  {
    id: '1.1.1',
    title: 'All Reports',
    as: Link,
    to: {
      pathname: '/courses',
      search: '?sort=name',
      hash: '#the-hash'
    }
  },
  {
    id: '1.1.2',
    title: 'Skan',
    href: 'https://www.google.com/',
    target: '_blank'
  }
];

Account

The Account component is a sub component of SidePanel to render the account information and actions.

Name	Type	Description
userName	string	Prop to provide user name
accountName	string	Prop to provide title for the account name
tooltipTitle	string	Prop to provide the tooltip content
isActionMenuOpen	boolean	Prop to provide open state of action menu
onClickButton	`(isActionMenuOpen: boolean) => void`	An onClick event to overwrite the icon button's onClick.
children	ReactNode	Prop to provide the content of action menu, list of MenuItem
action	ReactNode	Prop to provide action button for the action menu
footerActions	ReactNode	Prop to provide footer's action buttons for action menu
dataTestId	string	Prop to provide to unique `data-testid`

Note: The action menu of Account is customization of IconMenu component.

AgencyUser

The AgencyUser component is a sub component of SidePanel to render the agency user information and actions.

Name	Type	Description
title	string	Prop to provide title for the agency user
tooltipTitle	string	Prop to provide the tooltip content
onToggleMenu	`(isVisible: boolean) => void`	A callback to inform open state of action menu.
children	ReactNode	Prop to provide the content of action menu, includes: MenuHeader and list of MenuItem
dataTestId	string	Prop to provide to unique `data-testid`

Note: The action menu of AgencyUser is a variant of IconMenu component.

LanguageSelector

The LanguageSelector component is a sub component of SidePanel to render the language section.

Name	Type	Description
activeLanguage	string	Prop to provide the selected language value.
tooltipTitle	string	Prop to provide the tooltip content
children	ReactNode	Prop to provide the content of action menu, list of MenuItem
dataTestId	string	Prop to provide to unique `data-testid`

Note: The action menu of LanguageSelector is a variant of IconMenu component.

MenuHeader

The MenuItem is the sub component to render header of action menu in AgencyUser.

Name	Type	Description
children	ReactNode	Prop to provide the content of menu header

MenuItem

The MenuItem is the sub component to render list items of action menu in Account, AgencyUser, LanguageSelector.

Name	Type	Description
id	`'string', 'number'`	Prop to provide id of menu item
isActive	boolean	Prop to provide checked state (`AgencyUser`, `LanguageSelector`)
isDisabled	boolean	Prop to provide disabled item
icon	IconName	Prop to provide icon name
children	ReactNode	Prop to provide the content of menu item
onClick	(id: string) => void	Prop to provide a callback to inform the id of selected item
dataTestId	string	Prop to provide to unique `data-testid`

Note: you can refer more usage here

FooterActions

The FooterActions component is a sub component of SidePanel to render the footer actions.

Name	Type	Description
tooltipTitle	string	Prop to provide the tooltip content
isActionMenuOpen	boolean	Prop to provide open state of action menu
onClickButton	`(isActionMenuOpen: boolean) => void`	An onClick event to overwrite the icon button's onClick.
children	ReactNode	Prop to provide the content of actions, list of FooterActionItem
dataTestId	string	Prop to provide to unique `data-testid`

FooterActionItem

The FooterActionItem is the sub component to render list of actions in FooterActions.

Name	Type	Description
id	string	Prop to provide id of action item
icon	IconName	Prop to provide icon of action item
tooltipTitle	string	Prop to provide the tooltip content when side panel is expanded
children	ReactNode	Prop to provide the content of action item
onClick	(id: string) => void	Prop to provide a callback to inform the id of selected item
dataTestId	string	Prop to provide to unique `data-testid`

ErrorState

A component renders a warning Badge in the footer area.

Name	Type	Description
tooltip	string	Prop to provide the tooltip content

Props

Name	Type	Default
children Defines the content to be displayed inside the component.	ReactNode	—
isOpen Indicates whether the sidepanel is currently expanded.	boolean	—
onToggleButtonClick A callback function triggered when the toggle button is clicked.	((isOpen: boolean) => void)	—
onClickLogo A callback function that is invoked when the logo in header is clicked.	(() => void)	—
onClickHeaderAction A callback function that executes when an action button in the header is clicked.	(() => void)	—
headerActionTooltip Specifies the tooltip content for the header action button.	ReactNode	—
toggleButtonTooltip Defines the content of the tooltip for the toggle button.	ReactNode	—
footer The footer content of the component.	ReactNode	—
isLoading Indicates if the component is in a loading state.	boolean	—
dataTestId A custom identifier used for testing purposes	string	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Example​

Variant​

Agency Users​

Loading & Error state​

Sub Components​

NavSection​

NavItem​

note

Account​

AgencyUser​

LanguageSelector​

MenuHeader​

MenuItem​

FooterActions​

FooterActionItem​

ErrorState​

Props​

Example

Variant

Agency Users

Loading & Error state

Sub Components

NavSection

NavItem

Account

AgencyUser

LanguageSelector

MenuHeader

MenuItem

FooterActions

FooterActionItem

ErrorState

Props