84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Responsive from 'react-responsive';
|
|
import { AppContext } from '@edx/frontend-platform/react';
|
|
import { ensureConfig } from '@edx/frontend-platform';
|
|
|
|
import MobileHeader from './MobileHeader';
|
|
import HeaderBody from './HeaderBody';
|
|
|
|
ensureConfig([
|
|
'STUDIO_BASE_URL',
|
|
'SITE_NAME',
|
|
'LOGOUT_URL',
|
|
'LOGIN_URL',
|
|
'LOGO_URL',
|
|
], 'Studio Header component');
|
|
|
|
const StudioHeader = ({
|
|
number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
|
|
outlineLink, searchButtonAction, isNewHomePage,
|
|
}) => {
|
|
const { authenticatedUser, config } = useContext(AppContext);
|
|
const props = {
|
|
logo: config.LOGO_URL,
|
|
logoAltText: `Studio ${config.SITE_NAME}`,
|
|
number,
|
|
org,
|
|
title,
|
|
containerProps,
|
|
username: authenticatedUser?.username,
|
|
isAdmin: authenticatedUser?.administrator,
|
|
authenticatedUserAvatar: authenticatedUser?.avatar,
|
|
studioBaseUrl: isNewHomePage ? '/home' : config.STUDIO_BASE_URL,
|
|
logoutUrl: config.LOGOUT_URL,
|
|
isHiddenMainMenu,
|
|
mainMenuDropdowns,
|
|
outlineLink,
|
|
searchButtonAction,
|
|
};
|
|
|
|
return (
|
|
<div className="studio-header">
|
|
<a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
|
|
<Responsive maxWidth={841}>
|
|
<MobileHeader {...props} />
|
|
</Responsive>
|
|
<Responsive minWidth={842}>
|
|
<HeaderBody {...props} />
|
|
</Responsive>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
StudioHeader.propTypes = {
|
|
number: PropTypes.string,
|
|
org: PropTypes.string,
|
|
title: PropTypes.string.isRequired,
|
|
containerProps: HeaderBody.propTypes.containerProps,
|
|
isHiddenMainMenu: PropTypes.bool,
|
|
mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.string,
|
|
buttonTitle: PropTypes.node,
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
href: PropTypes.string,
|
|
title: PropTypes.node,
|
|
})),
|
|
})),
|
|
outlineLink: PropTypes.string,
|
|
searchButtonAction: PropTypes.func,
|
|
isNewHomePage: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
StudioHeader.defaultProps = {
|
|
number: '',
|
|
org: '',
|
|
containerProps: {},
|
|
isHiddenMainMenu: false,
|
|
mainMenuDropdowns: [],
|
|
outlineLink: null,
|
|
searchButtonAction: null,
|
|
};
|
|
|
|
export default StudioHeader;
|