+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png b/src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png
new file mode 100644
index 000000000..ed0ec695d
Binary files /dev/null and b/src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png differ
diff --git a/src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png b/src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png
new file mode 100644
index 000000000..68338ba90
Binary files /dev/null and b/src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png differ
diff --git a/src/plugin-slots/CourseInfoSlot/images/replace_course_title.png b/src/plugin-slots/CourseInfoSlot/images/replace_course_title.png
new file mode 100644
index 000000000..5358afde5
Binary files /dev/null and b/src/plugin-slots/CourseInfoSlot/images/replace_course_title.png differ
diff --git a/src/plugin-slots/CourseInfoSlot/index.jsx b/src/plugin-slots/CourseInfoSlot/index.jsx
new file mode 100644
index 000000000..db7c3f253
--- /dev/null
+++ b/src/plugin-slots/CourseInfoSlot/index.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderCourseInfo, { courseInfoDataShape } from '../../learning-header/LearningHeaderCourseInfo';
+
+const CourseInfoSlot = ({
+ courseOrg,
+ courseNumber,
+ courseTitle,
+ ...attributes
+}) => (
+
+
+
+);
+
+CourseInfoSlot.propTypes = courseInfoDataShape;
+
+export default CourseInfoSlot;
diff --git a/src/plugin-slots/DesktopHeaderSlot/README.md b/src/plugin-slots/DesktopHeaderSlot/README.md
new file mode 100644
index 000000000..eb40189d9
--- /dev/null
+++ b/src/plugin-slots/DesktopHeaderSlot/README.md
@@ -0,0 +1,41 @@
+# Desktop Header Slot
+
+### Slot ID: `desktop_header_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the entire desktop header.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the desktop header entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/desktop_header_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_header_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_desktop_header_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
\ No newline at end of file
diff --git a/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png b/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png
new file mode 100644
index 000000000..3d663f719
Binary files /dev/null and b/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png differ
diff --git a/src/plugin-slots/DesktopHeaderSlot/index.jsx b/src/plugin-slots/DesktopHeaderSlot/index.jsx
new file mode 100644
index 000000000..aeaac542e
--- /dev/null
+++ b/src/plugin-slots/DesktopHeaderSlot/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeader, { desktopHeaderDataShape } from '../../desktop-header/DesktopHeader';
+
+const DesktopHeaderSlot = ({
+ props,
+}) => (
+
+
+
+);
+
+DesktopHeaderSlot.propTypes = desktopHeaderDataShape;
+
+export default DesktopHeaderSlot;
diff --git a/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md b/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
new file mode 100644
index 000000000..8d8249e2f
--- /dev/null
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
@@ -0,0 +1,134 @@
+# Desktop Logged Out Items Slot
+
+### Slot ID: `desktop_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the items shown on desktop when the user is logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items shown on desktop when the user is logged out.
+
+![Screenshot of modified items](./images/desktop_logged_out_items_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+ widget.content.items = [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ desktop_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyLoggedOutItems,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace with Custom Component
+
+The following `env.config.jsx` will replace the items shown on desktop when the user is logged out entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/desktop_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_logged_out_items_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after
+
+The following `env.config.jsx` will place custom components before and after the items shown on desktop when the user is logged out (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/desktop_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
diff --git a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png
new file mode 100644
index 000000000..62282e08c
Binary files /dev/null and b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png differ
diff --git a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png
new file mode 100644
index 000000000..36b431aca
Binary files /dev/null and b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png differ
diff --git a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png
new file mode 100644
index 000000000..4f59f0993
Binary files /dev/null and b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png differ
diff --git a/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx b/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
new file mode 100644
index 000000000..b9676b2d6
--- /dev/null
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopLoggedOutItems, { desktopLoggedOutItemsDataShape } from '../../desktop-header/DesktopLoggedOutItems';
+
+const DesktopLoggedOutItemsSlot = ({
+ items,
+}) => (
+
+
+
+);
+
+DesktopLoggedOutItemsSlot.propTypes = {
+ items: desktopLoggedOutItemsDataShape,
+};
+
+export default DesktopLoggedOutItemsSlot;
diff --git a/src/plugin-slots/DesktopMainMenuSlot/README.md b/src/plugin-slots/DesktopMainMenuSlot/README.md
new file mode 100644
index 000000000..969179170
--- /dev/null
+++ b/src/plugin-slots/DesktopMainMenuSlot/README.md
@@ -0,0 +1,134 @@
+# Desktop Main Menu Slot
+
+### Slot ID: `desktop_main_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop main menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop main menu.
+
+![Screenshot of modified items](./images/desktop_main_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = ( widget ) => {
+ widget.content.menu = [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ desktop_main_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyMainMenu,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop main menu entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/desktop_main_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_main_menu_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_main_menu_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the desktop main menu (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/desktop_main_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_main_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_main_menu_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
diff --git a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png
new file mode 100644
index 000000000..cbfb69eba
Binary files /dev/null and b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png differ
diff --git a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png
new file mode 100644
index 000000000..baaa9e2c8
Binary files /dev/null and b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png differ
diff --git a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png
new file mode 100644
index 000000000..18d858d2c
Binary files /dev/null and b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png differ
diff --git a/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx b/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
new file mode 100644
index 000000000..79c1f5fad
--- /dev/null
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+
+const DesktopSecondaryMenuSlot = ({
+ menu,
+}) => (
+
+
+
+);
+
+DesktopSecondaryMenuSlot.propTypes = {
+ menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopSecondaryMenuSlot;
diff --git a/src/plugin-slots/DesktopUserMenuSlot/README.md b/src/plugin-slots/DesktopUserMenuSlot/README.md
new file mode 100644
index 000000000..e98b33d63
--- /dev/null
+++ b/src/plugin-slots/DesktopUserMenuSlot/README.md
@@ -0,0 +1,141 @@
+# Desktop User Menu Slot
+
+### Slot ID: `desktop_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop user menu.
+
+![Screenshot of modified items](./images/desktop_user_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+ widget.content.menu = [
+ {
+ items: [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ ]
+ },
+ {
+ items: [
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ]
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ desktop_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyUserMenu,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop user menu entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_user_menu_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_user_menu_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the desktop user menu (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/desktop_user_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ desktop_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_user_menu_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png
new file mode 100644
index 000000000..05034c484
Binary files /dev/null and b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png differ
diff --git a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png
new file mode 100644
index 000000000..e8410c6e3
Binary files /dev/null and b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png differ
diff --git a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png
new file mode 100644
index 000000000..3412e0bd0
Binary files /dev/null and b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png differ
diff --git a/src/plugin-slots/DesktopUserMenuSlot/index.jsx b/src/plugin-slots/DesktopUserMenuSlot/index.jsx
new file mode 100644
index 000000000..1df367c99
--- /dev/null
+++ b/src/plugin-slots/DesktopUserMenuSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';
+
+const DesktopUserMenuSlot = ({
+ menu,
+}) => (
+
+
+
+);
+
+DesktopUserMenuSlot.propTypes = {
+ menu: desktopUserMenuDataShape,
+};
+
+export default DesktopUserMenuSlot;
diff --git a/src/plugin-slots/LearningHelpSlot/README.md b/src/plugin-slots/LearningHelpSlot/README.md
new file mode 100644
index 000000000..0f28edf38
--- /dev/null
+++ b/src/plugin-slots/LearningHelpSlot/README.md
@@ -0,0 +1,41 @@
+# Learning Help Slot
+
+### Slot ID: `learning_help_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning help link.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the help link entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of replaced learning help with custom component](./images/learning_help_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ learning_help_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_learning_help_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png b/src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png
new file mode 100644
index 000000000..52eb9b305
Binary files /dev/null and b/src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png differ
diff --git a/src/plugin-slots/LearningHelpSlot/index.jsx b/src/plugin-slots/LearningHelpSlot/index.jsx
new file mode 100644
index 000000000..57643023a
--- /dev/null
+++ b/src/plugin-slots/LearningHelpSlot/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
+
+const LearningHelpSlot = () => (
+
+
+
+);
+
+export default LearningHelpSlot;
diff --git a/src/plugin-slots/LearningLoggedOutItemsSlot/README.md b/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
new file mode 100644
index 000000000..a803d0181
--- /dev/null
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
@@ -0,0 +1,132 @@
+# Learning Logged Out Items Slot
+
+### Slot ID: `learning_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the items shown on the learning header when the user is logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items shown on the learning header when the user is logged out.
+
+![Screenshot of modified items](./images/learning_logged_out_items_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+ widget.content.buttonsInfo = [
+ {
+ href: 'https://docs.openedx.org/en/latest/',
+ message: 'Documentation',
+ },
+ {
+ href: 'https://discuss.openedx.org/',
+ message: 'Forums',
+ },
+ {
+ href: 'https://openedx.org/',
+ message: 'openedx.org',
+ variant: 'primary',
+ },
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ learning_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyLoggedOutItems,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace with Custom Component
+
+The following `env.config.jsx` will replace the items shown in the learning header when the user is logged out entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of replaced with custom component](./images/learning_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ learning_logged_out_items_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after
+
+The following `env.config.jsx` will place custom components before and after the items shown in the learning header when the user is logged out (in this case centered `h1`s with π and π).
+
+![Screenshot of added custom components before and after](./images/learning_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ learning_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
diff --git a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png
new file mode 100644
index 000000000..bce54d3e3
Binary files /dev/null and b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png differ
diff --git a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png
new file mode 100644
index 000000000..b4cc6110c
Binary files /dev/null and b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png differ
diff --git a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png
new file mode 100644
index 000000000..7eb0f59cc
Binary files /dev/null and b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png differ
diff --git a/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx b/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
new file mode 100644
index 000000000..daf64a6b8
--- /dev/null
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningLoggedOutButtons, { learningHeaderLoggedOutItemsDataShape } from '../../learning-header/LearningLoggedOutButtons';
+
+const LearningLoggedOutItemsSlot = ({
+ buttonsInfo,
+}) => (
+
+
+
+);
+
+LearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;
+
+export default LearningLoggedOutItemsSlot;
diff --git a/src/plugin-slots/LearningUserMenuSlot/README.md b/src/plugin-slots/LearningUserMenuSlot/README.md
new file mode 100644
index 000000000..97fa467fe
--- /dev/null
+++ b/src/plugin-slots/LearningUserMenuSlot/README.md
@@ -0,0 +1,130 @@
+# Learning User Menu Slot
+
+### Slot ID: `learning_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the learning user menu.
+
+![Screenshot of modified items](./images/learning_user_menu_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+ widget.content.items = [
+ {
+ href: 'https://openedx.org/',
+ message: 'openedx.org',
+ },
+ {
+ href: 'https://docs.openedx.org/en/latest/',
+ message: 'Documentation',
+ },
+ {
+ href: 'https://discuss.openedx.org/',
+ message: 'Forums',
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ learning_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyUserMenu,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the items in the learning user menu entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of replaced with custom component](./images/learning_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ learning_user_menu_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_user_menu_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the learning user menu (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/learning_user_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ learning_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_user_menu_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
diff --git a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png
new file mode 100644
index 000000000..09bfd24e2
Binary files /dev/null and b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png differ
diff --git a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png
new file mode 100644
index 000000000..e4e7d5635
Binary files /dev/null and b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png differ
diff --git a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png
new file mode 100644
index 000000000..95ca5718c
Binary files /dev/null and b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png differ
diff --git a/src/plugin-slots/LearningUserMenuSlot/index.jsx b/src/plugin-slots/LearningUserMenuSlot/index.jsx
new file mode 100644
index 000000000..b78e3ae86
--- /dev/null
+++ b/src/plugin-slots/LearningUserMenuSlot/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderUserMenuItems, { learningHeaderUserMenuDataShape } from '../../learning-header/LearningHeaderUserMenuItems';
+
+const LearningUserMenuSlot = ({
+ items,
+}) => (
+
+
+
+);
+
+LearningUserMenuSlot.propTypes = learningHeaderUserMenuDataShape;
+
+export default LearningUserMenuSlot;
diff --git a/src/plugin-slots/LogoSlot/index.jsx b/src/plugin-slots/LogoSlot/index.jsx
index 0f61e8499..42f926299 100644
--- a/src/plugin-slots/LogoSlot/index.jsx
+++ b/src/plugin-slots/LogoSlot/index.jsx
@@ -1,7 +1,6 @@
import React from 'react';
-import PropTypes from 'prop-types';
import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import Logo from '../../Logo';
+import Logo, { logoDataShape } from '../../Logo';
const LogoSlot = ({
href, src, alt, ...attributes
@@ -16,10 +15,6 @@ const LogoSlot = ({
);
-LogoSlot.propTypes = {
- href: PropTypes.string.isRequired,
- src: PropTypes.string.isRequired,
- alt: PropTypes.string.isRequired,
-};
+LogoSlot.propTypes = logoDataShape;
export default LogoSlot;
diff --git a/src/plugin-slots/MobileHeaderSlot/README.md b/src/plugin-slots/MobileHeaderSlot/README.md
new file mode 100644
index 000000000..566f47081
--- /dev/null
+++ b/src/plugin-slots/MobileHeaderSlot/README.md
@@ -0,0 +1,41 @@
+# Mobile Header Slot
+
+### Slot ID: `mobile_header_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the entire mobile header.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the mobile header entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/mobile_header_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_header_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_mobile_header_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
\ No newline at end of file
diff --git a/src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png b/src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png
new file mode 100644
index 000000000..df026339c
Binary files /dev/null and b/src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png differ
diff --git a/src/plugin-slots/MobileHeaderSlot/index.jsx b/src/plugin-slots/MobileHeaderSlot/index.jsx
new file mode 100644
index 000000000..b0b6c3830
--- /dev/null
+++ b/src/plugin-slots/MobileHeaderSlot/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeader, { mobileHeaderDataShape } from '../../mobile-header/MobileHeader';
+
+const MobileHeaderSlot = ({
+ props,
+}) => (
+
+
+
+);
+
+MobileHeaderSlot.propTypes = mobileHeaderDataShape;
+
+export default MobileHeaderSlot;
diff --git a/src/plugin-slots/MobileLoggedOutItemsSlot/README.md b/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
new file mode 100644
index 000000000..ffa8dd619
--- /dev/null
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
@@ -0,0 +1,134 @@
+# Mobile Logged Out Items Slot
+
+### Slot ID: `mobile_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile user menu when logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in mobile user menu when logged out.
+
+![Screenshot of modified items](./images/mobile_logged_out_items_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+ widget.content.items = [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ mobile_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyLoggedOutItems,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Items with Custom Component
+
+The following `env.config.jsx` will replace the items in mobile user menu when logged out entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/mobile_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_logged_out_items_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Items
+
+The following `env.config.jsx` will place custom components before and after the items in mobile user menu when logged out (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/mobile_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_logged_out_items_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_logged_out_items_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
diff --git a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png
new file mode 100644
index 000000000..a6f3ba1bc
Binary files /dev/null and b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png differ
diff --git a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png
new file mode 100644
index 000000000..11d9d25b5
Binary files /dev/null and b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png differ
diff --git a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png
new file mode 100644
index 000000000..36b0527f8
Binary files /dev/null and b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png differ
diff --git a/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx b/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
new file mode 100644
index 000000000..490dda04b
--- /dev/null
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileLoggedOutItems, { mobileHeaderLoggedOutItemsDataShape } from '../../mobile-header/MobileLoggedOutItems';
+
+const MobileLoggedOutItemsSlot = ({
+ items,
+}) => (
+
+
+
+);
+
+MobileLoggedOutItemsSlot.propTypes = {
+ items: mobileHeaderLoggedOutItemsDataShape,
+};
+
+export default MobileLoggedOutItemsSlot;
diff --git a/src/plugin-slots/MobileMainMenuSlot/README.md b/src/plugin-slots/MobileMainMenuSlot/README.md
new file mode 100644
index 000000000..5eebd7bb7
--- /dev/null
+++ b/src/plugin-slots/MobileMainMenuSlot/README.md
@@ -0,0 +1,134 @@
+# Mobile Main Menu Slot
+
+### Slot ID: `mobile_main_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile main menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the mobile main menu.
+
+![Screenshot of modified items](./images/mobile_main_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = ( widget ) => {
+ widget.content.menu = [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ mobile_main_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyMainMenu,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the mobile main menu entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/mobile_main_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_main_menu_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_main_menu_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the mobile main menu (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/mobile_main_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_main_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_main_menu_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
diff --git a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_component.png b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_component.png
new file mode 100644
index 000000000..00c82a787
Binary files /dev/null and b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_component.png differ
diff --git a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_components_before_after.png b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_components_before_after.png
new file mode 100644
index 000000000..eda0f9a07
Binary files /dev/null and b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_components_before_after.png differ
diff --git a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_modify_items.png b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_modify_items.png
new file mode 100644
index 000000000..0f2e75bad
Binary files /dev/null and b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_modify_items.png differ
diff --git a/src/plugin-slots/MobileMainMenuSlot/index.jsx b/src/plugin-slots/MobileMainMenuSlot/index.jsx
new file mode 100644
index 000000000..b26cfc257
--- /dev/null
+++ b/src/plugin-slots/MobileMainMenuSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeaderMainMenu, { mobileHeaderMainMenuDataShape } from '../../mobile-header/MobileHeaderMainMenu';
+
+const MobileMainMenuSlot = ({
+ menu,
+}) => (
+
+
+
+);
+
+MobileMainMenuSlot.propTypes = {
+ menu: mobileHeaderMainMenuDataShape,
+};
+
+export default MobileMainMenuSlot;
diff --git a/src/plugin-slots/MobileUserMenuSlot/README.md b/src/plugin-slots/MobileUserMenuSlot/README.md
new file mode 100644
index 000000000..d75e08e85
--- /dev/null
+++ b/src/plugin-slots/MobileUserMenuSlot/README.md
@@ -0,0 +1,142 @@
+# Mobile User Menu Slot
+
+### Slot ID: `mobile_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the mobile user menu.
+
+![Screenshot of modified items](./images/mobile_user_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+ widget.content.menu = [
+ {
+ items: [
+ {
+ type: 'item',
+ href: 'https://openedx.org/',
+ content: 'openedx.org',
+ },
+ {
+ type: 'item',
+ href: 'https://docs.openedx.org/en/latest/',
+ content: 'Documentation',
+ },
+ ]
+ },
+ {
+ items: [
+ {
+ type: 'item',
+ href: 'https://discuss.openedx.org/',
+ content: 'Forums',
+ }
+ ]
+ }
+ ];
+ return widget;
+};
+
+const config = {
+ pluginSlots: {
+ mobile_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Modify,
+ widgetId: 'default_contents',
+ fn: modifyUserMenu,
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the mobile main user entirely (in this case with a centered πΊοΈ `h1`)
+
+![Screenshot of custom component](./images/mobile_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_user_menu_slot: {
+ keepDefault: false,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_user_menu_component',
+ type: DIRECT_PLUGIN,
+ RenderWidget: () => (
+
πΊοΈ
+ ),
+ },
+ },
+ ]
+ },
+ },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the mobile user menu (in this case centered `h1`s with π and π).
+
+![Screenshot of custom components before and after](./images/mobile_user_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ mobile_user_menu_slot: {
+ keepDefault: true,
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widget: {
+ id: 'custom_before_user_menu_component',
+ type: DIRECT_PLUGIN,
+ priority: 10,
+ RenderWidget: () => (
+