58 lines
1.2 KiB
JavaScript
58 lines
1.2 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { Fill } from 'react-slot-fill';
|
|
import { isArray, noop } from 'lodash';
|
|
import { IconButton } from '@wordpress/components';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import { getAdminLink } from 'lib/nav-utils';
|
|
|
|
const Header = ( { sections, onToggle, isSidebarOpen } ) => {
|
|
const _sections = isArray( sections ) ? sections : [ sections ];
|
|
|
|
return (
|
|
<div className="woo-dash__header">
|
|
<h1>
|
|
<span>
|
|
<a href={ getAdminLink( '/' ) }>WooCommerce</a>
|
|
</span>
|
|
{ _sections.map( ( subSection, i ) => <span key={ i }>{ subSection }</span> ) }
|
|
</h1>
|
|
<div className="woo-dash__header-toggle">
|
|
<IconButton
|
|
className="woo-dash__header-button"
|
|
onClick={ onToggle }
|
|
icon="clock"
|
|
label={ __( 'Show Sidebar', 'woo-dash' ) }
|
|
aria-expanded={ isSidebarOpen }
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Header.propTypes = {
|
|
sections: PropTypes.node.isRequired,
|
|
onToggle: PropTypes.func.isRequired,
|
|
isSidebarOpen: PropTypes.bool,
|
|
};
|
|
|
|
Header.defaultProps = {
|
|
onToggle: noop,
|
|
}
|
|
|
|
export default function( props ) {
|
|
return (
|
|
<Fill name="header">
|
|
<Header { ...props } />
|
|
</Fill>
|
|
);
|
|
}
|