Files
frontend-component-header/src/plugin-slots/DesktopHeaderSlot/README.md
Brian Smith a346dccd4c 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`
2024-10-22 12:18:11 -04:00

912 B

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

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;