71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { getConfig } from '@edx/frontend-platform';
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
import { AppContext } from '@edx/frontend-platform/react';
|
|
|
|
import AnonymousUserMenu from './AnonymousUserMenu';
|
|
import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
|
|
import LogoSlot from '../plugin-slots/LogoSlot';
|
|
import CourseInfoSlot from '../plugin-slots/CourseInfoSlot';
|
|
import { courseInfoDataShape } from './LearningHeaderCourseInfo';
|
|
import messages from './messages';
|
|
import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
|
|
|
|
const LearningHeader = ({
|
|
courseOrg,
|
|
courseNumber,
|
|
courseTitle,
|
|
showUserDropdown,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const { authenticatedUser } = useContext(AppContext);
|
|
|
|
const headerLogo = (
|
|
<LogoSlot
|
|
href={`${getConfig().LMS_BASE_URL}/dashboard`}
|
|
src={getConfig().LOGO_URL}
|
|
alt={getConfig().SITE_NAME}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<header className="learning-header">
|
|
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
|
|
<div className="container-xl py-2 d-flex align-items-center">
|
|
{headerLogo}
|
|
<div className="flex-grow-1 course-title-lockup d-flex" style={{ lineHeight: 1 }}>
|
|
<CourseInfoSlot courseOrg={courseOrg} courseNumber={courseNumber} courseTitle={courseTitle} />
|
|
</div>
|
|
{showUserDropdown && authenticatedUser && (
|
|
<>
|
|
<LearningHelpSlot />
|
|
<AuthenticatedUserDropdown
|
|
username={authenticatedUser.username}
|
|
/>
|
|
</>
|
|
)}
|
|
{showUserDropdown && !authenticatedUser && (
|
|
<AnonymousUserMenu />
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
LearningHeader.propTypes = {
|
|
courseOrg: courseInfoDataShape.courseOrg,
|
|
courseNumber: courseInfoDataShape.courseNumber,
|
|
courseTitle: courseInfoDataShape.courseTitle,
|
|
showUserDropdown: PropTypes.bool,
|
|
};
|
|
|
|
LearningHeader.defaultProps = {
|
|
courseOrg: null,
|
|
courseNumber: null,
|
|
courseTitle: null,
|
|
showUserDropdown: true,
|
|
};
|
|
|
|
export default LearningHeader;
|