@artistanbul/frontend-component-header-sumac 1.1.0

package/dist/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;
+```
+

package/dist/plugin-slots/DesktopSecondaryMenuSlot/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+var DesktopSecondaryMenuSlot = function DesktopSecondaryMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "desktop_secondary_menu_slot",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(DesktopHeaderMainOrSecondaryMenu, {
+    menu: menu
+  }));
+};
+DesktopSecondaryMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape
+};
+export default DesktopSecondaryMenuSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/DesktopSecondaryMenuSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","DesktopHeaderMainOrSecondaryMenu","desktopHeaderMainOrSecondaryMenuDataShape","DesktopSecondaryMenuSlot","_ref","menu","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';\n\nconst DesktopSecondaryMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"desktop_secondary_menu_slot\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <DesktopHeaderMainOrSecondaryMenu menu={menu} />\n  </PluginSlot>\n);\n\nDesktopSecondaryMenuSlot.propTypes = {\n  menu: desktopHeaderMainOrSecondaryMenuDataShape,\n};\n\nexport default DesktopSecondaryMenuSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,gCAAgC,IAAIC,yCAAyC,QAAQ,uDAAuD;AAEnJ,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA;EAAA,IAC5BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,oBAEJN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,6BAA6B;IAChCC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACL,gCAAgC;IAACI,IAAI,EAAEA;EAAK,CAAE,CACrC,CAAC;AAAA,CACd;AAEDF,wBAAwB,CAACO,SAAS,GAAG;EACnCL,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,wBAAwB","ignoreList":[]}

package/dist/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;
+```

package/dist/plugin-slots/DesktopUserMenuSlot/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';
+var DesktopUserMenuSlot = function DesktopUserMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "desktop_user_menu_slot",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(DesktopHeaderUserMenu, {
+    menu: menu
+  }));
+};
+DesktopUserMenuSlot.propTypes = {
+  menu: desktopUserMenuDataShape
+};
+export default DesktopUserMenuSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/DesktopUserMenuSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","DesktopHeaderUserMenu","desktopUserMenuDataShape","DesktopUserMenuSlot","_ref","menu","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/DesktopUserMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';\n\nconst DesktopUserMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"desktop_user_menu_slot\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <DesktopHeaderUserMenu menu={menu} />\n  </PluginSlot>\n);\n\nDesktopUserMenuSlot.propTypes = {\n  menu: desktopUserMenuDataShape,\n};\n\nexport default DesktopUserMenuSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,qBAAqB,IAAIC,wBAAwB,QAAQ,4CAA4C;AAE5G,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA;EAAA,IACvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,oBAEJN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,wBAAwB;IAC3BC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACL,qBAAqB;IAACI,IAAI,EAAEA;EAAK,CAAE,CAC1B,CAAC;AAAA,CACd;AAEDF,mBAAmB,CAACO,SAAS,GAAG;EAC9BL,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,mBAAmB","ignoreList":[]}

package/dist/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;
+```

package/dist/plugin-slots/LearningHelpSlot/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
+var LearningHelpSlot = function LearningHelpSlot() {
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "learning_help_slot"
+  }, /*#__PURE__*/React.createElement(LearningHeaderHelpLink, null));
+};
+export default LearningHelpSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/LearningHelpSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","LearningHeaderHelpLink","LearningHelpSlot","createElement","id"],"sources":["../../../src/plugin-slots/LearningHelpSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';\n\nconst LearningHelpSlot = () => (\n  <PluginSlot id=\"learning_help_slot\">\n    <LearningHeaderHelpLink />\n  </PluginSlot>\n);\n\nexport default LearningHelpSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,sBAAsB,MAAM,8CAA8C;AAEjF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;EAAA,oBACpBH,KAAA,CAAAI,aAAA,CAACH,UAAU;IAACI,EAAE,EAAC;EAAoB,gBACjCL,KAAA,CAAAI,aAAA,CAACF,sBAAsB,MAAE,CACf,CAAC;AAAA,CACd;AAED,eAAeC,gBAAgB","ignoreList":[]}

package/dist/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;
+```
+

package/dist/plugin-slots/LearningLoggedOutItemsSlot/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningLoggedOutButtons, { learningHeaderLoggedOutItemsDataShape } from '../../learning-header/LearningLoggedOutButtons';
+var LearningLoggedOutItemsSlot = function LearningLoggedOutItemsSlot(_ref) {
+  var buttonsInfo = _ref.buttonsInfo;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "learning_logged_out_items_slot",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(LearningLoggedOutButtons, {
+    buttonsInfo: buttonsInfo
+  }));
+};
+LearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;
+export default LearningLoggedOutItemsSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/LearningLoggedOutItemsSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","LearningLoggedOutButtons","learningHeaderLoggedOutItemsDataShape","LearningLoggedOutItemsSlot","_ref","buttonsInfo","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport LearningLoggedOutButtons, { learningHeaderLoggedOutItemsDataShape } from '../../learning-header/LearningLoggedOutButtons';\n\nconst LearningLoggedOutItemsSlot = ({\n  buttonsInfo,\n}) => (\n  <PluginSlot\n    id=\"learning_logged_out_items_slot\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <LearningLoggedOutButtons buttonsInfo={buttonsInfo} />\n  </PluginSlot>\n);\n\nLearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;\n\nexport default LearningLoggedOutItemsSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,wBAAwB,IAAIC,qCAAqC,QAAQ,gDAAgD;AAEhI,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA;EAAA,IAC9BC,WAAW,GAAAD,IAAA,CAAXC,WAAW;EAAA,oBAEXN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,gCAAgC;IACnCC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACL,wBAAwB;IAACI,WAAW,EAAEA;EAAY,CAAE,CAC3C,CAAC;AAAA,CACd;AAEDF,0BAA0B,CAACO,SAAS,GAAGR,qCAAqC;AAE5E,eAAeC,0BAA0B","ignoreList":[]}

package/dist/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;
+```