Financial-Times / cm-react-components / 4fd18ea4-83a1-49c7-9b12-f1e128514343

import React, { useEffect, useRef } from 'react';

import PropTypes from 'prop-types';

import oHeaderServices from '@financial-times/o-header-services';

import { SecondaryNavigation } from './SecondaryNavigation';

import { MainNavigation } from './MainNavigation';

  title,

  name,

  id,

  mainMenuData,

  secondaryMenuData,

  clientMenuData,

  renderProp

}) => {

      // Initialize o-header-services for this specific header element

    }

    // Cleanup function

        // Destroy the component when unmounting to prevent memory leaks

        }

      }

    };

  }, []);

    <div className="o-layout__header" ref={headerRef}>

      <header className="o-header-services " data-o-component="o-header-services" data-testid="header-component">

        <div className="o-header-services__top">

          <div className="o-header-services__hamburger">

            <a className="o-header-services__hamburger-icon" href="/" role="button">

              <span className="o-header-services__visually-hidden">Open primary navigation</span>

            </a>

          </div>

          <a href="/">

            <div className="o-header-services__logo" />

          </a>

          <div className="o-header-services__title">

            <a className="o-header-services__product-name" href="/">{title}</a>

          </div>

        </div>

        <MainNavigation

          menuData={mainMenuData}

          renderProp={renderProp}

        />

          <SecondaryNavigation

            name={name}

            id={id}

            menuData={secondaryMenuData}

            clientMenuData={clientMenuData}

            renderProp={renderProp}

          />

        )}

      </header>

    </div>

  );

};

  title: PropTypes.string,

  name: PropTypes.string,

  id: PropTypes.string,

  mainMenuData: MainNavigation.propTypes.menuData,

  secondaryMenuData: SecondaryNavigation.propTypes.menuData,

  clientMenuData: SecondaryNavigation.propTypes.clientMenuData,

  renderProp: SecondaryNavigation.propTypes.renderProp

};

export default Header;