diff --git a/src/plugin-slots/DesktopMainMenuSlot/README.md b/src/plugin-slots/DesktopMainMenuSlot/README.md index b266cdc..a02fd75 100644 --- a/src/plugin-slots/DesktopMainMenuSlot/README.md +++ b/src/plugin-slots/DesktopMainMenuSlot/README.md @@ -13,9 +13,11 @@ This slot is used to replace/modify/hide the desktop main menu. ### Modify Items -The following `env.config.jsx` will modify the items in the desktop main menu. +#### Replace All Items -![Screenshot of modified items](./images/desktop_main_menu_modify_items.png) +The following `env.config.jsx` will replace all items in the desktop main menu. + +![Screenshot of modified items](./images/desktop_main_menu_replace_all_items.png) ```jsx import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; @@ -59,6 +61,58 @@ const config = { export default config; ``` +#### Add Items + +The following `env.config.jsx` will add items in the desktop main menu. + +![Screenshot of custom marketing links](./images/desktop_main_menu_add_items.png) + +```jsx +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const modifyMainMenu = (widget) => { + const existingMenu = widget.RenderWidget.props.menu || []; + + const newMarketingLinks = [ + { + type: 'item', + href: 'https://example.com/how-it-works', + content: 'How it works', + }, + { + type: 'item', + href: 'https://example.com/courses', + content: 'Courses', + }, + { + type: 'item', + href: 'https://example.com/schools', + content: 'Schools', + } + ]; + + widget.content.menu = [...existingMenu, ...newMarketingLinks]; + return widget; +}; + +const config = { + pluginSlots: { + 'org.openedx.frontend.layout.header_desktop_main_menu.v1': { + 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`) @@ -134,4 +188,3 @@ const config = { export default config; ``` - diff --git a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png new file mode 100644 index 0000000..3e3e6ac Binary files /dev/null and b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png differ diff --git a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_modify_items.png b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png similarity index 100% rename from src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_modify_items.png rename to src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png diff --git a/src/plugin-slots/MobileMainMenuSlot/README.md b/src/plugin-slots/MobileMainMenuSlot/README.md index 6d65670..b0bdd74 100644 --- a/src/plugin-slots/MobileMainMenuSlot/README.md +++ b/src/plugin-slots/MobileMainMenuSlot/README.md @@ -13,9 +13,11 @@ This slot is used to replace/modify/hide the mobile main menu. ### Modify Items -The following `env.config.jsx` will modify the items in the mobile main menu. +#### Replace All Items -![Screenshot of modified items](./images/mobile_main_menu_modify_items.png) +The following `env.config.jsx` will replace all items in the mobile main menu. + +![Screenshot of modified items](./images/mobile_main_menu_replace_all_items.png) ```jsx import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; @@ -59,6 +61,58 @@ const config = { export default config; ``` +#### Add Items + +The following `env.config.jsx` will add items in the mobile main menu. + +![Screenshot of custom marketing links](./images/mobile_main_menu_add_items.png) + +```jsx +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const modifyMainMenu = (widget) => { + const existingMenu = widget.RenderWidget.props.menu || []; + + const newMarketingLinks = [ + { + type: 'item', + href: 'https://example.com/how-it-works', + content: 'How it works', + }, + { + type: 'item', + href: 'https://example.com/courses', + content: 'Courses', + }, + { + type: 'item', + href: 'https://example.com/schools', + content: 'Schools', + } + ]; + + widget.content.menu = [...existingMenu, ...newMarketingLinks]; + return widget; +}; + +const config = { + pluginSlots: { + 'org.openedx.frontend.layout.header_mobile_main_menu.v1': { + 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`) diff --git a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_add_items.png b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_add_items.png new file mode 100644 index 0000000..25b0dcf Binary files /dev/null and b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_add_items.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_replace_all_items.png similarity index 100% rename from src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_modify_items.png rename to src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_replace_all_items.png