75 lines
1.8 KiB
JavaScript
75 lines
1.8 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, isHiddenMainMenu, mainMenuDropdowns, outlineLink,
|
|
}) => {
|
|
const { authenticatedUser, config } = useContext(AppContext);
|
|
const props = {
|
|
logo: config.LOGO_URL,
|
|
logoAltText: `Studio ${config.SITE_NAME}`,
|
|
number,
|
|
org,
|
|
title,
|
|
username: authenticatedUser?.username,
|
|
isAdmin: authenticatedUser?.administrator,
|
|
authenticatedUserAvatar: authenticatedUser?.avatar,
|
|
studioBaseUrl: config.STUDIO_BASE_URL,
|
|
logoutUrl: config.LOGOUT_URL,
|
|
isHiddenMainMenu,
|
|
mainMenuDropdowns,
|
|
outlineLink,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Responsive maxWidth={768}>
|
|
<MobileHeader {...props} />
|
|
</Responsive>
|
|
<Responsive minWidth={769}>
|
|
<HeaderBody {...props} />
|
|
</Responsive>
|
|
</>
|
|
);
|
|
};
|
|
|
|
StudioHeader.propTypes = {
|
|
number: PropTypes.string,
|
|
org: PropTypes.string,
|
|
title: PropTypes.string.isRequired,
|
|
isHiddenMainMenu: PropTypes.bool,
|
|
mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
|
|
id: PropTypes.string,
|
|
buttonTitle: PropTypes.string,
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
href: PropTypes.string,
|
|
title: PropTypes.string,
|
|
})),
|
|
})),
|
|
outlineLink: PropTypes.string,
|
|
};
|
|
|
|
StudioHeader.defaultProps = {
|
|
number: '',
|
|
org: '',
|
|
isHiddenMainMenu: false,
|
|
mainMenuDropdowns: [],
|
|
outlineLink: null,
|
|
};
|
|
|
|
export default StudioHeader;
|