Skip to content

Commit b7d2bba

Browse files
committed
Incorporated Fabrice's comments
1 parent f62cef5 commit b7d2bba

File tree

1 file changed

+36
-103
lines changed

1 file changed

+36
-103
lines changed

modules/customizing-the-appearance/proc-customize-rhdh-sidebar-menuitems.adoc

Lines changed: 36 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -7,123 +7,56 @@ The sidebar menu in {product} consists of two main parts:
77

88
* *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.
99

10+
1011
.Procedure
1112

12-
Customize the main menu items using the following steps:
13+
. To configure a Dynamic plugin menu item, add the following content to your `{my-app-config-file}` file:
1314
+
14-
--
15-
. Open the `app-config-rhdh.yaml` file and do any of the following tasks:
16-
* To customize the order and parent-child relationships for the main menu items, enter the `dynamicPlugins.frontend.default.main-menu-items.menuItems` field.
17-
* To add dynamic plugin menu items, enter the `dynamicPlugins.frontend.<package_name>.menuItems` field.
18-
19-
.Example `app-config-rhdh.yaml` file
2015
[source,yaml]
2116
----
2217
dynamicPlugins:
2318
frontend:
24-
<package_name>: # same as `scalprum.name` key in plugin's `package.json`
25-
menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation
26-
<menu_item_name>: # unique name in the plugin menu items list <1>
27-
icon: home | group | category | extension | school | _<your_icon>_ # <2>
28-
title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes` <3>
29-
priority: 10 # optional, defines the order of menu items in the sidebar <4>
30-
parent: favorites # optional, defines parent-child relationships for nested menu items <5>
31-
----
32-
33-
You can modify the fields in the previous example to configure the desired order and parent-child relationships of the sidebar menu items.
34-
35-
<1> This attribute 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`.
19+
<package_name>: # <1>
20+
menuItems: # <2>
21+
<menu_item_name>: # <3>
22+
icon: # home | group | category | extension | school | _<your_icon>_ <4>
23+
title: My Plugin Page # <5>
24+
priority: 10 # <6>
25+
parent: favorites # <7>
26+
----
27+
<1> `_<package_name>_`: Specifies the name of the package that is the same as `scalprum.name` key in the `package.json` of the plugin.
28+
<2> `menuItems`: (Optional) Allows you to configure plugin menu items in the main sidebar navigation.
29+
<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`.
30+
<4> `icon`: (Optional) Specifies the icon for the menu item. You can use default icons or extend the icon set with dynamic plugins. {product-short} also provides additional icons in its internal library, such as:
31+
<5> `title`: (Optional) Specifies the title of the menu item. It can be removed if the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`.
32+
<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.
33+
<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.
34+
35+
. To add Main menu item, add the `default.` prefix to its key in your `{my-app-config-file}` file:
3636
+
37-
For more complex, multi-segment paths such as `path: /metrics/users/info`, the `menu_item_name` must use dot notation to represent the full path, for example, `metrics.users.info`. Trailing and leading slashes in paths are ignored. For example, `path: /docs` results in `menu_item_name: docs`, and `path: /metrics/users` results in `menu_item_name: metrics.users`.
38-
39-
<2> This optional attribute specifies the icon for the menu item. You can use default icons or extend the icon set with dynamic plugins. {product-short} also provides additional icons in its internal library, such as:
40-
+
41-
.Home Icon in the internal library
42-
[source, yaml]
43-
----
44-
dynamicPlugins:
45-
frontend:
46-
<package_name>:
47-
menuItems:
48-
<menu_item_name>:
49-
icon: home
50-
----
51-
+
52-
Similarly, the internal library includes icons for `group`, `category`, `extension`, and `school`. If the icon is already defined in the `dynamicRoutes` configuration under `menuItem.icon`, it can be removed from the in the `menuItems` configuration. Also, both SVG and HTML image icons are supported. For example:
53-
+
54-
.Example SVG icon
55-
[source,html]
56-
----
57-
icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>
58-
----
59-
+
60-
.Example image icon
61-
[source,html]
62-
----
63-
icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png
64-
----
65-
66-
<3> This optional attribute specifies the title of the menu item. It can be removed if the title is already specified in the `dynamicRoutes` configuration under `menuItem.text`.
67-
68-
<4> This optional attribute 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.
69-
70-
<5> This optional attribute 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.
71-
72-
.Example `menuItems` configuration
7337
[source,yaml]
7438
----
7539
dynamicPlugins:
7640
frontend:
77-
<package_name>:
78-
dynamicRoutes:
79-
- path: /my-plugin
80-
module: CustomModule
81-
importName: FooPluginPage
82-
menuItem:
83-
icon: fooIcon
84-
text: Foo Plugin Page
41+
default.main-menu-items: # <1>
8542
menuItems:
86-
my-plugin: # matches `path` in `dynamicRoutes`
87-
priority: 10 # controls order of plugins under the parent menu item
88-
parent: favorites # nests this plugin under the `favorites` parent menu item
89-
favorites: # configuration for the parent menu item
90-
icon: favorite # icon from RHDH system icons
91-
title: Favorites # title for the parent menu item
92-
priority: 100 # controls the order of this top-level menu item
93-
----
94-
--
95-
96-
. To ensure that a menu item is identified as a main menu item, you must add the `default.` prefix to its key. For example:
97-
+
98-
--
99-
.Example configuration of main menu items in sidebar navigation
100-
[source,yaml]
101-
----
102-
dynamicPlugins:
103-
frontend:
104-
default.main-menu-items: # key for configuring static main menu items
105-
menuItems:
106-
default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key <1>
107-
parent: my_menu_group # optional, specifies the parent menu item for this item
108-
priority: 10 # optional, specifies the order of this menu item within its menu level
109-
default.<menu_group_parent_item_name>: # must be configured if it is specified as the parent of any menu items. `default.` prefix is required for a main group parent item key <1>
110-
icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group
111-
title: my_menu_group_title # required for parent menu items, defines the icon for the menu group
112-
priority: 100 # optional, specifies the order of the parent menu item in the sidebar
113-
----
114-
115-
116-
<1> 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.
43+
default.<menu_item_name>: # <2>
44+
parent: my_menu_group # <3>
45+
priority: 10 # <4>
46+
default.<menu_group_parent_item_name>: # <4>
47+
icon: my_menu_group_icon # <5>
48+
title: my_menu_group_title # <6>
49+
priority: 100 # <7>
50+
----
51+
<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.
52+
<2> `default._<menu_item_name>_`: Specifies the key of the menu item configuration. `default.` prefix is required for a main menu item key.
53+
<3> `parent`: (Optional) Specifies the parent menu item for this item.
54+
<4> `priority`: (Optional) Specifies the order of this menu item within its menu level.
55+
<5> `icon`: Required for parent menu items It defines the icon for the menu group.
56+
<6> `title`: Required for parent menu items. It defines the icon for the menu group.
57+
<7> `priority`: (Optional) Specifies the order of the parent menu item in the sidebar.
11758

11859
[NOTE]
11960
====
12061
The default priority of main menu items determines their order in the sidebar. You can customize the order of the static main menu items by adjusting their priority values. Ensure that the priority and title of each item is clear to facilitate easy reordering.
121-
====
122-
--
123-
124-
125-
126-
127-
128-
129-
62+
====

0 commit comments

Comments
 (0)