docs: example of adding Marketing links via the plugin slots

src/Header.jsx

@@ -45,9 +45,10 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  * See the documentation for the structure of secondary menu item.
  * @param {list} userMenuItems - The list of user menu items to display.
  * See the documentation for the structure of user menu item.
+ * @param {string} logoDestination - The destination of the logo.
  */
 const Header = ({
-  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
+  intl, mainMenuItems, secondaryMenuItems, userMenuItems, logoDestination,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
 
@@ -110,7 +111,7 @@ const Header = ({
   const props = {
     logo: config.LOGO_URL,
     logoAltText: config.SITE_NAME,
-    logoDestination: `${config.LMS_BASE_URL}/dashboard`,
+    logoDestination: logoDestination || `${config.LMS_BASE_URL}/dashboard`,
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
@@ -136,6 +137,7 @@ Header.defaultProps = {
   mainMenuItems: null,
   secondaryMenuItems: null,
   userMenuItems: null,
+  logoDestination: null,
 };
 
 Header.propTypes = {
@@ -157,6 +159,10 @@ Header.propTypes = {
       isActive: PropTypes.bool,
     })),
   })),
+  logoDestination: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([false, null]),
+  ]),
 };
 
 export default injectIntl(Header);

src/Header.test.jsx

@@ -101,4 +101,30 @@ describe('<Header />', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('renders correctly with custom logoDestination', () => {
+    const contextValue = {
+      authenticatedUser: null,
+      config: {
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+        SITE_NAME: process.env.SITE_NAME,
+        LOGIN_URL: process.env.LOGIN_URL,
+        LOGOUT_URL: process.env.LOGOUT_URL,
+        LOGO_URL: process.env.LOGO_URL,
+      },
+    };
+    const customLogoDestination = '/custom-destination';
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider value={contextValue}>
+            <Header logoDestination={customLogoDestination} />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

src/__snapshots__/Header.test.jsx.snap

@@ -443,3 +443,63 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
   </div>
 </header>
 `;
+
+exports[`<Header /> renders correctly with custom logoDestination 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <a
+        className="logo"
+        href="/custom-destination"
+      >
+        <img
+          alt="edX"
+          className="d-block"
+          src="https://edx-cdn.org/v3/default/logo.svg"
+        />
+      </a>
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/dashboard"
+          onClick={null}
+        >
+          Courses
+        </a>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <a
+          className="btn mr-2 btn-link"
+          href="http://localhost:18000/login"
+        >
+          Login
+        </a>
+        <a
+          className="btn mr-2 btn-outline-primary"
+          href="http://localhost:18000/register"
+        >
+          Sign Up
+        </a>
+      </nav>
+    </div>
+  </div>
+</header>
+`;

src/desktop-header/DesktopHeader.jsx

@@ -115,7 +115,10 @@ export const desktopHeaderDataShape = {
   loggedOutItems: desktopLoggedOutItemsDataShape,
   logo: PropTypes.string,
   logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
+  logoDestination: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([false, null]),
+  ]),
   avatar: PropTypes.string,
   username: PropTypes.string,
   loggedIn: PropTypes.bool,
@@ -128,7 +131,7 @@ DesktopHeader.propTypes = {
   loggedOutItems: desktopHeaderDataShape.loggedOutItemsmainMenu,
   logo: desktopHeaderDataShape.logomainMenu,
   logoAltText: desktopHeaderDataShape.logoAltTextmainMenu,
-  logoDestination: desktopHeaderDataShape.logoDestinationmainMenu,
+  logoDestination: desktopHeaderDataShape.logoDestination,
   avatar: desktopHeaderDataShape.avatarmainMenu,
   username: desktopHeaderDataShape.usernamemainMenu,
   loggedIn: desktopHeaderDataShape.loggedInmainMenu,

src/mobile-header/MobileHeader.jsx

@@ -118,7 +118,10 @@ export const mobileHeaderDataShape = {
   loggedOutItems: mobileHeaderLoggedOutItemsDataShape,
   logo: PropTypes.string,
   logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
+  logoDestination: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([false, null]),
+  ]),
   avatar: PropTypes.string,
   username: PropTypes.string,
   loggedIn: PropTypes.bool,

src/plugin-slots/DesktopMainMenuSlot/README.md

@@ -135,3 +135,54 @@ const config = {
 export default config;
 ```
 
+### Add Custom Marketing links
+
+This `env.config.jsx` will add new custom **Marketing links** to the desktop main menu.
+
+![Screenshot of custom marketing links](./images/desktop_main_menu_marketing_links.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;
+```