a346dccd4c
Add the following `frontend-plugin-framework` slots: * `logo_slot` * `desktop_main_menu_slot` * `desktop_secondary_menu_slot` * `mobile_main_menu_slot` * `course_info_slot` * `learning_help_slot` * `desktop_logged_out_items_slot` * `mobile_logged_out_items_slot` * `mobile_user_menu_slot` * `desktop_user_menu_slot` * `learning_user_menu_slot` * `learning_logged_out_items_slot` * `desktop_header_slot`
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
const DesktopHeaderUserMenu = ({ menu }) => menu.map((group, index) => (
|
|
// eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
|
|
<React.Fragment key={index}>
|
|
{group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
|
|
{group.items.map(({
|
|
type, content, href, disabled, isActive, onClick,
|
|
}) => (
|
|
<a
|
|
className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
|
|
key={`${type}-${content}`}
|
|
href={href}
|
|
onClick={onClick || null}
|
|
>
|
|
{content}
|
|
</a>
|
|
))}
|
|
{index < menu.length - 1 && <div className="dropdown-divider" role="separator" />}
|
|
</React.Fragment>
|
|
));
|
|
|
|
export const desktopUserMenuDataShape = PropTypes.arrayOf(PropTypes.shape({
|
|
heading: PropTypes.string,
|
|
items: PropTypes.arrayOf(PropTypes.shape({
|
|
type: PropTypes.oneOf(['item', 'menu']),
|
|
href: PropTypes.string,
|
|
content: PropTypes.string,
|
|
isActive: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
})),
|
|
}));
|
|
|
|
DesktopHeaderUserMenu.propTypes = {
|
|
menu: desktopUserMenuDataShape,
|
|
};
|
|
|
|
export default DesktopHeaderUserMenu;
|