{"size": 1838, "ext": "js", "max_stars_repo_path": "src-docs/src/views/header/header_sections.js", "max_stars_repo_name": "jrodewig/eui", "max_stars_repo_stars_event_min_datetime": "2020-06-27T13:11:53.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-02T01:03:42.000Z", "max_issues_repo_path": "src-docs/src/views/header/header_sections.js", "max_issues_repo_name": "jrodewig/eui", "max_issues_repo_issues_event_min_datetime": "2020-03-23T18:07:10.000Z", "max_issues_repo_issues_event_max_datetime": "2020-03-23T18:07:10.000Z", "max_forks_repo_path": "src-docs/src/views/header/header_sections.js", "max_forks_repo_name": "jrodewig/eui", "max_forks_repo_forks_event_min_datetime": "2020-09-02T01:03:43.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-02T01:03:43.000Z"}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 20.4222222222, "max_line_length": 61, "alphanum_fraction": 0.5364526659}
import React from 'react';

import {
  EuiHeader,
  EuiFieldSearch,
  EuiHeaderLogo,
} from '../../../../src/components';

import HeaderAppMenu from './header_app_menu';
import HeaderUserMenu from './header_user_menu';
import HeaderSpacesMenu from './header_spaces_menu';

export default () => {
  const renderLogo = (
    <EuiHeaderLogo
      iconType="logoKibana"
      href="#"
      aria-label="Go to home page"
    />
  );

  const breadcrumbs = [
    {
      text: 'Management',
      href: '#',
      onClick: e => {
        e.preventDefault();
        console.log('You clicked management');
      },
      'data-test-subj': 'breadcrumbsAnimals',
      className: 'customClass',
    },
    {
      text: 'Truncation test is here for a really long item',
      href: '#',
      onClick: e => {
        e.preventDefault();
        console.log('You clicked truncation test');
      },
    },
    {
      text: 'hidden',
      href: '#',
      onClick: e => {
        e.preventDefault();
        console.log('You clicked hidden');
      },
    },
    {
      text: 'Users',
      href: '#',
      onClick: e => {
        e.preventDefault();
        console.log('You clicked users');
      },
    },
    {
      text: 'Create',
    },
  ];

  const renderSearch = (
    <EuiFieldSearch
      placeholder="Search for anything"
      aria-label="Search for anything"
      compressed
    />
  );

  const sections = [
    {
      items: [renderLogo, <HeaderSpacesMenu />],
      borders: 'right',
      breadcrumbs: breadcrumbs,
      breadcrumbProps: {
        'aria-label': 'Header sections breadcrumbs',
      },
    },
    {
      items: [renderSearch, <div style={{ width: 8 }} />],
      borders: 'none',
    },
    {
      items: [<HeaderUserMenu />, <HeaderAppMenu />],
    },
  ];

  return <EuiHeader sections={sections} />;
};
