baazjs/src/components/Navigation/navHeader.js

import React, { Fragment } from 'react';
import { bool, func, shape, string } from 'prop-types';
import {
    X as CloseIcon
} from 'react-feather';

import { mergeClasses } from '../../classify';
import Icon from '../Icon';
import Trigger from '../Trigger';
import defaultClasses from './navHeader.css';
import AuthBar from '../AuthBar'
import { useNavigationHeader } from 'src/peregrine/talons/Navigation/useNavigationHeader';



const NavHeader = props => {
    const { isTopLevel, onBack, onClose, view, showSignIn } = props;

    const talonProps = useNavigationHeader({
        isTopLevel,
        onBack,
        onClose,
        view
    });

    const { handleClose } = talonProps;


    const classes = mergeClasses(defaultClasses, props.classes);


    return (
        <Fragment>
            <AuthBar
                showSignIn={showSignIn}
            />
            <Trigger key="closeButton" action={handleClose} classes={{
                root: classes.btn_root
            }}>
                <Icon src={CloseIcon} size={20} />
            </Trigger>
        </Fragment>
    );
};

export default NavHeader;

NavHeader.propTypes = {
    classes: shape({
        title: string
    }),
    isTopLevel: bool,
    onBack: func.isRequired,
    onClose: func.isRequired,
    view: string.isRequired
};