NavigationPanel

() => {
  return (
    <div style={{ maxWidth: 256, height: 500 }}>
      <NavigationPanel
        closeButton={
          <NavigationPanel.CloseButton
            text="Закрыть"
            onClick={() => console.log('click NavigationPanel.CloseButton')}
          />
        }
        logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}
      >
        <GroupedList
          options={[
            {
              id: 0,
              groupName: 'Monitoring',
              items: [
                {
                  id: 0,
                  header: 'Playground',
                  icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Playground settings, API',
                  icon: (
                    <GroupedList.Icon name="configure-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 1,
              groupName: 'Development',
              items: [
                {
                  id: 0,
                  header: 'Data models',
                  icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Pipeline manager',
                  icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Math models',
                  icon: (
                    <GroupedList.Icon name="function-icon" fill="#3B425B" />
                  ),
                },
                {
                  id: 3,
                  header: 'Rules',
                  icon: (
                    <GroupedList.Icon name="warning-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 2,
              groupName: 'Others',
              items: [
                {
                  id: 0,
                  header: 'Settings',
                  icon: (
                    <GroupedList.Icon
                      name="settings-gear-icon"
                      fill="#3B425B"
                    />
                  ),
                  selected: true,
                },
                {
                  id: 1,
                  header: 'Documentation',
                  icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Profile',
                  icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,
                },
              ],
              separator: 'top',
            },
          ]}
        />
      </NavigationPanel>
    </div>
  )
}

() => {
  return (
    <div style={{ maxWidth: 256 }}>
      <NavigationPanel
        closeButton={
          <NavigationPanel.CloseButton
            text="Закрыть"
            onClick={() => console.log('click NavigationPanel.CloseButton')}
          />
        }
        logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}
        actions={
          <NavigationPanel.Actions>
            <List
              options={[
                {
                  id: 0,
                  header: 'Open applications list',
                  icon: (
                    <GroupedList.Icon name="grater-icon" fill="#3B425B" />
                  ),
                  separator: 'top',
                },
              ]}
            />
          </NavigationPanel.Actions>
        }
      >
        <GroupedList
          options={[
            {
              id: 0,
              groupName: 'Monitoring',
              items: [
                {
                  id: 0,
                  header: 'Playground',
                  icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Playground settings, API',
                  icon: (
                    <GroupedList.Icon name="configure-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 1,
              groupName: 'Development',
              items: [
                {
                  id: 0,
                  header: 'Data models',
                  icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Pipeline manager',
                  icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Math models',
                  icon: (
                    <GroupedList.Icon name="function-icon" fill="#3B425B" />
                  ),
                },
                {
                  id: 3,
                  header: 'Rules',
                  icon: (
                    <GroupedList.Icon name="warning-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 2,
              groupName: 'Others',
              items: [
                {
                  id: 0,
                  header: 'Settings',
                  icon: (
                    <GroupedList.Icon
                      name="settings-gear-icon"
                      fill="#3B425B"
                    />
                  ),
                  selected: true,
                },
                {
                  id: 1,
                  header: 'Documentation',
                  icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Profile',
                  icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,
                },
              ],
              separator: 'top',
            },
          ]}
        />
      </NavigationPanel>
    </div>
  )
}

() => {
  return (
    <div style={{ maxWidth: 256 }}>
      <NavigationPanel
        logo={<NavigationPanel.Logo src="/public/f5-logo.svg" />}
      >
        <GroupedList
          options={[
            {
              id: 0,
              groupName: 'Monitoring',
              items: [
                {
                  id: 0,
                  header: 'Playground',
                  icon: <GroupedList.Icon name="view-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Playground settings, API',
                  icon: (
                    <GroupedList.Icon name="configure-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 1,
              groupName: 'Development',
              items: [
                {
                  id: 0,
                  header: 'Data models',
                  icon: <GroupedList.Icon name="cell-icon" fill="#3B425B" />,
                },
                {
                  id: 1,
                  header: 'Pipeline manager',
                  icon: <GroupedList.Icon name="play-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Math models',
                  icon: (
                    <GroupedList.Icon name="function-icon" fill="#3B425B" />
                  ),
                },
                {
                  id: 3,
                  header: 'Rules',
                  icon: (
                    <GroupedList.Icon name="warning-icon" fill="#3B425B" />
                  ),
                },
              ],
              separator: 'top',
            },
            {
              id: 2,
              groupName: 'Others',
              items: [
                {
                  id: 0,
                  header: 'Settings',
                  icon: (
                    <GroupedList.Icon
                      name="settings-gear-icon"
                      fill="#3B425B"
                    />
                  ),
                  selected: true,
                },
                {
                  id: 1,
                  header: 'Documentation',
                  icon: <GroupedList.Icon name="book-icon" fill="#3B425B" />,
                },
                {
                  id: 2,
                  header: 'Profile',
                  icon: <GroupedList.Icon name="user-icon" fill="#3B425B" />,
                },
              ],
              separator: 'top',
            },
          ]}
        />
      </NavigationPanel>
    </div>
  )
}