# Learning User Menu Toggle Slot

### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`

## Description

This slot is used to replace/modify/hide the contents of the learning user menu toggle button.

## Examples

### Modify Icon

The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.

![Screenshot of modified items](./images/learning_user_menu_toggle_modified_items.png)

```jsx
import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
import { faHouse } from '@fortawesome/free-solid-svg-icons';

const modifyUserMenuToggle = ( widget ) => {
  widget.content.icon = faHouse;
  return widget;
};

const config = {
  pluginSlots: {
    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Modify,
          widgetId: 'default_contents',
          fn: modifyUserMenuToggle,
        },
      ]
    },
  },
}

export default config;
```

### Replace Menu toggle contents with Custom Component

The following `env.config.jsx` will replace the contents of the learning user menu toggle button's contents entirely (in this case with an emoji)

![Screenshot of replaced with custom component](./images/learning_user_menu_toggle_custom_component.png)

```jsx
import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';

const config = {
  pluginSlots: {
    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
      keepDefault: false,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
            id: 'custom_learning_user_menu_toggle',
            type: DIRECT_PLUGIN,
            RenderWidget: () => (
              <span>🦊</span>
            ),
          },
        },
      ]
    },
  },
}

export default config;
```