75 lines
1.9 KiB
Markdown
75 lines
1.9 KiB
Markdown
# Learning User Menu Toggle Slot
|
|
|
|
### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`
|
|
|
|
## Description
|
|
|
|
This slot is used to replace/modify/hide the contents of the learning user menu toggle button.
|
|
|
|
## Examples
|
|
|
|
### Modify Icon
|
|
|
|
The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.
|
|
|
|
|
|
|
|
```jsx
|
|
import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
|
|
import { faHouse } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
const modifyUserMenuToggle = ( widget ) => {
|
|
widget.content.icon = faHouse;
|
|
return widget;
|
|
};
|
|
|
|
const config = {
|
|
pluginSlots: {
|
|
'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
|
|
keepDefault: true,
|
|
plugins: [
|
|
{
|
|
op: PLUGIN_OPERATIONS.Modify,
|
|
widgetId: 'default_contents',
|
|
fn: modifyUserMenuToggle,
|
|
},
|
|
]
|
|
},
|
|
},
|
|
}
|
|
|
|
export default config;
|
|
```
|
|
|
|
### Replace Menu toggle contents with Custom Component
|
|
|
|
The following `env.config.jsx` will replace the contents of the learning user menu toggle button's contents entirely (in this case with an emoji)
|
|
|
|
|
|
|
|
```jsx
|
|
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
|
|
|
|
const config = {
|
|
pluginSlots: {
|
|
'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
|
|
keepDefault: false,
|
|
plugins: [
|
|
{
|
|
op: PLUGIN_OPERATIONS.Insert,
|
|
widget: {
|
|
id: 'custom_learning_user_menu_toggle',
|
|
type: DIRECT_PLUGIN,
|
|
RenderWidget: () => (
|
|
<span>🦊</span>
|
|
),
|
|
},
|
|
},
|
|
]
|
|
},
|
|
},
|
|
}
|
|
|
|
export default config;
|
|
```
|