|
1 | 1 | [id='proc-customize-rhdh-sidebar-menuitems_{context}'] |
2 | 2 | = Customizing the sidebar menu items for your {product-short} instance |
3 | 3 |
|
4 | | -The sidebar menu in {product} consists of two main parts: |
| 4 | +The sidebar menu in {product} consists of two main parts that you can configure: |
5 | 5 |
|
6 | | -* *Dynamic plugin menu items*: These items are displayed beneath the main menu and can be customized based on the plugins installed. The main menu items section is dynamic and can change based on your preferences and installed plugins. |
7 | | - |
8 | | -* *Main menu items*: These items are the static menu items that form the core navigation structure of sidebar. These menu items remain consistent and are predefined. |
| 6 | +* *Dynamic plugin menu items*: Your preferences and your active plugins define dynamically one part of the sidebar menu. |
| 7 | +* *Main menu items*: The core navigation structure of sidebar is static. |
9 | 8 |
|
10 | 9 | .Procedure |
11 | 10 |
|
12 | | -. To configure a Dynamic plugin menu item, add the following content to your `{my-app-config-file}` file: |
| 11 | +. To configure *Dynamic plugin menu item*, add the following content to your `{my-app-config-file}` file: |
13 | 12 | + |
14 | 13 | [source,yaml] |
15 | 14 | ---- |
16 | 15 | dynamicPlugins: |
17 | 16 | frontend: |
18 | | - <package_name>: <1> |
19 | | - menuItems: <2> |
20 | | - <menu_item_name>: <3> |
21 | | - icon: # home | group | category | extension | school | _<your_icon>_ <4> |
22 | | - title: My Plugin Page <5> |
23 | | - priority: 10 <6> |
24 | | - parent: favorites <7> |
| 17 | + <package_name>: # <1> |
| 18 | + menuItems: # <2> |
| 19 | + <menu_item_name>: # <3> |
| 20 | + icon: # home | group | category | extension | school | _<your_icon>_ # <4> |
| 21 | + title: _<plugin_page_title>_ # <5> |
| 22 | + priority: 10 # <6> |
| 23 | + parent: favorites # <7> |
25 | 24 | ---- |
26 | | -<1> `_<package_name>_`: Specifies the name of the package that is the same as `scalprum.name` key in the `package.json` of the plugin. |
27 | | -<2> `menuItems`: (Optional) Allows you to configure plugin menu items in the main sidebar navigation. |
28 | | -<3> `_<menu_item_name>_`: Represents a unique name in the main sidebar navigation. It can denote either a standalone menu item or a parent menu item. If this attribute represents a plugin menu item, the name of the attribute must match with the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`. |
29 | | -<4> `icon`: (Optional) Specifies the icon for the menu item. You can use default icons, such as: `home`, `group`, `category`, `extension`, and `school`. You can also use an SVG or HTML image icon, such as: `icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg> or icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png` |
| 25 | +<1> `_<package_name>_`: Specifies the name of the package. This name is the same as the `scalprum.name` key in the plugin `package.json`. |
| 26 | +<2> `menuItems`: (Optional) Use to configure plugin menu items in the main sidebar navigation. |
| 27 | +<3> `_<menu_item_name>_`: Specifies a unique name in the main sidebar navigation for either a standalone menu item or a parent menu item. If this field specifies a plugin menu item, the name of the menu item must match the name using in the corresponding path in `dynamicRoutes`. For example, if `dynamicRoutes` defines `path: /my-plugin`, then `menu_item_name` must be defined as `my-plugin`. |
| 28 | +<4> `icon`: (Optional) Specifies the icon for the menu item. You can use default icons, such as: `home`, `group`, `category`, `extension`, and `school`. You can also use an SVG or HTML image icon, such as: `icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>` or `icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png`. |
30 | 29 | <5> `title`: (Optional) Specifies the title of the menu item. Omit it when the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`. |
31 | | -<6> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this attribute for each section. |
32 | | -<7> `parent`: (Optional) Specifies the parent menu item under which the current item is nested. If this attribute is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this attribute for each section. |
| 30 | +<6> `priority`: (Optional) Sets the order in which menu items appear in the sidebar. The default priority is 0, which places the item at the bottom of the list. A higher priority value places the item higher in the sidebar. You can define this field for each section. |
| 31 | +<7> `parent`: (Optional) Specifies the parent menu item under which the current item is nested. If this field is used, the parent menu item must be defined elsewhere in the `menuItems` configuration of any enabled plugin. You can define this field for each section. |
33 | 32 |
|
34 | | -. To add Main menu item, add the `default.` prefix to its key in your `{my-app-config-file}` file: |
| 33 | +. To add *Main menu item* to the dynamic plugins configuration, add the `default.` prefix to its key in your `{my-app-config-file}` file: |
35 | 34 | + |
36 | 35 | [source,yaml] |
37 | 36 | ---- |
38 | 37 | dynamicPlugins: |
39 | 38 | frontend: |
40 | | - default.main-menu-items: <1> |
| 39 | + default.main-menu-items: # <1> |
41 | 40 | menuItems: |
42 | | - default.<menu_item_name>: <2> |
43 | | - parent: my_menu_group <3> |
| 41 | + default._<menu_item_name>_: # <2> |
| 42 | + parent: _<my_menu_group>_ # <3> |
44 | 43 | priority: 10 <4> |
45 | | - default.<menu_group_parent_item_name>: <4> |
46 | | - icon: my_menu_group_icon <5> |
47 | | - title: my_menu_group_title <6> |
48 | | - priority: 100 <7> |
| 44 | + default._<menu_group_parent_item_name>_: # <4> |
| 45 | + icon: _<my_menu_group_icon>_ # <5> |
| 46 | + title: _<my_menu_group_title>_ # <6> |
| 47 | + priority: 100 # <7> |
49 | 48 | ---- |
50 | 49 | <1> `default.main-menu-items`: Specifies the key for configuring static main menu items. The `default.` prefix identifies an item as a main menu item. You can add the `default.` prefix to both individual menu items or parent menu group configuration, such as `default.<menu_group_parent_item_name>` in the previous example. |
51 | 50 | <2> `default._<menu_item_name>_`: Specifies the key of the menu item configuration. `default.` prefix is required for a main menu item key. |
52 | 51 | <3> `parent`: (Optional) Specifies the parent menu item for this item. |
53 | 52 | <4> `priority`: (Optional) Specifies the order of this menu item within its menu level. |
54 | | -<5> `icon`: Required for parent menu items It defines the icon for the menu group. |
55 | | -<6> `title`: Required for parent menu items. It defines the icon for the menu group. |
| 53 | +<5> `icon`: Specifies the icon for the menu group. Required for parent menu items. |
| 54 | +<6> `title`: Specifies the title for the menu group. Required for parent menu items. |
56 | 55 | <7> `priority`: (Optional) Specifies the order of the parent menu item in the sidebar. |
57 | 56 | + |
58 | 57 | [NOTE] |
|
0 commit comments