docs: [FC-86] Restructure Modify Items section with Add/Replace examples (#598)

* docs: example of adding Marketing links via the plugin slots

* refactor: code refactoring

* feat: added logoDestination props for Header component

* refactor: after rebase

* refactor: updated tests

* refactor: after review

* refactor: removed logoDestination prop

* docs: Custom Marketing links mobile example

* refactor: after review

Author: PKulkoRaccoonGang

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;
 ```
-

src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png

@@ -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`)