feat: add frontend-plugin-framework slots (#545)

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`

src/plugin-slots/CourseInfoSlot/README.md

@@ -0,0 +1,125 @@
+# Course Info Slot
+
+### Slot ID: `course_info_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the course info.
+
+## Examples
+
+### Replace Course Title
+
+The following `env.config.jsx` will replace the course title.
+
+![Screenshot of replaced course title](./images/replace_course_title.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const replaceCourseTitle = ( widget ) => {
+  widget.content.courseTitle = "Custom Course Title";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    course_info_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: replaceCourseTitle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Course Info with Custom Component
+
+The following `env.config.jsx` will replace the course info entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced course info with custom component](./images/replace_course_info_with_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_info_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_info_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Course Info
+
+The following `env.config.jsx` will place custom components before and after the course info  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of added custom components before and after course info](./images/add_custom_components_before_and_after_course_info.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_info_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_course_info_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h3 style={{
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                marginRight: '0.5rem',
+              }}>🌜</h3>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_course_info_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h3 style={{
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                marginLeft: '0.5rem',
+              }}>🌛</h3>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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
+}) => (
+  <PluginSlot
+    id="course_info_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningHeaderCourseInfo
+      courseOrg={courseOrg}
+      courseNumber={courseNumber}
+      courseTitle={courseTitle}
+      {...attributes}
+    />
+  </PluginSlot>
+);
+
+CourseInfoSlot.propTypes = courseInfoDataShape;
+
+export default CourseInfoSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

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,
+}) => (
+  <PluginSlot
+    id="desktop_header_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeader {...props} />
+  </PluginSlot>
+);
+
+DesktopHeaderSlot.propTypes = desktopHeaderDataShape;
+
+export default DesktopHeaderSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

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,
+}) => (
+  <PluginSlot
+    id="desktop_logged_out_items_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopLoggedOutItems items={items} />
+  </PluginSlot>
+);
+
+DesktopLoggedOutItemsSlot.propTypes = {
+  items: desktopLoggedOutItemsDataShape,
+};
+
+export default DesktopLoggedOutItemsSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_main_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

src/plugin-slots/DesktopMainMenuSlot/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 DesktopMainMenuSlot = ({
+  menu,
+}) => (
+  <PluginSlot
+    id="desktop_main_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderMainOrSecondaryMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopMainMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopMainMenuSlot;

src/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -0,0 +1,129 @@
+# Desktop Secondary Menu Slot
+
+### Slot ID: `desktop_secondary_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop secondary menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop secondary menu.
+
+![Screenshot of modified items](./images/desktop_secondary_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifySecondaryMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      type: 'item',
+      href: 'https://www.youtube.com/c/openedx',
+      content: 'Open edX on YouTube',
+    },
+    {
+      type: 'item',
+      href: 'https://github.com/openedx/',
+      content: 'Open edX on GitHub',
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    desktop_secondary_menu_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifySecondaryMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop secondary menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_secondary_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    desktop_secondary_menu_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the desktop secondary menu  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of custom components before and after](./images/desktop_secondary_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    desktop_secondary_menu_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

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,
+}) => (
+  <PluginSlot
+    id="desktop_secondary_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderMainOrSecondaryMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopSecondaryMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopSecondaryMenuSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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,
+}) => (
+  <PluginSlot
+    id="desktop_user_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderUserMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopUserMenuSlot.propTypes = {
+  menu: desktopUserMenuDataShape,
+};
+
+export default DesktopUserMenuSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

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 = () => (
+  <PluginSlot id="learning_help_slot">
+    <LearningHeaderHelpLink />
+  </PluginSlot>
+);
+
+export default LearningHelpSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

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,
+}) => (
+  <PluginSlot
+    id="learning_logged_out_items_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningLoggedOutButtons buttonsInfo={buttonsInfo} />
+  </PluginSlot>
+);
+
+LearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;
+
+export default LearningLoggedOutItemsSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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,
+}) => (
+  <PluginSlot
+    id="learning_user_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningHeaderUserMenuItems items={items} />
+  </PluginSlot>
+);
+
+LearningUserMenuSlot.propTypes = learningHeaderUserMenuDataShape;
+
+export default LearningUserMenuSlot;

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 = ({
   </PluginSlot>
 );
 
-LogoSlot.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
+LogoSlot.propTypes = logoDataShape;
 
 export default LogoSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

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,
+}) => (
+  <PluginSlot
+    id="mobile_header_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileHeader {...props} />
+  </PluginSlot>
+);
+
+MobileHeaderSlot.propTypes = mobileHeaderDataShape;
+
+export default MobileHeaderSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

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,
+}) => (
+  <PluginSlot
+    id="mobile_logged_out_items_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileLoggedOutItems items={items} />
+  </PluginSlot>
+);
+
+MobileLoggedOutItemsSlot.propTypes = {
+  items: mobileHeaderLoggedOutItemsDataShape,
+};
+
+export default MobileLoggedOutItemsSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_main_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

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,
+}) => (
+  <PluginSlot
+    id="mobile_main_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileHeaderMainMenu menu={menu} />
+  </PluginSlot>
+);
+
+MobileMainMenuSlot.propTypes = {
+  menu: mobileHeaderMainMenuDataShape,
+};
+
+export default MobileMainMenuSlot;

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: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+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: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

src/plugin-slots/MobileUserMenuSlot/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeaderUserMenu, { mobileHeaderUserMenuDataShape } from '../../mobile-header/MobileHeaderUserMenu';
+
+const MobileUserMenuSlot = ({
+  menu,
+}) => (
+  <PluginSlot
+    id="mobile_user_menu_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileHeaderUserMenu menu={menu} />
+  </PluginSlot>
+);
+
+MobileUserMenuSlot.propTypes = {
+  menu: mobileHeaderUserMenuDataShape,
+};
+
+export default MobileUserMenuSlot;

src/plugin-slots/README.md

@@ -1,3 +1,15 @@
 # `frontend-component-header` Plugin Slots
 
 * [`logo_slot`](./LogoSlot/)
+* [`desktop_main_menu_slot`](./DesktopMainMenuSlot/)
+* [`desktop_secondary_menu_slot`](./DesktopSecondaryMenuSlot/)
+* [`mobile_main_menu_slot`](./MobileMainMenuSlot/)
+* [`course_info_slot`](./CourseInfoSlot/)
+* [`learning_help_slot`](./LearningHelpSlot/)
+* [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/)
+* [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
+* [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
+* [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
+* [`learning_user_menu_slot`](./LearningUserMenuSlot/)
+* [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
+* [`desktop_header_slot`](./DesktopHeaderSlot/)