8.3. Developer Hub インスタンスのサイドバーメニュー項目のカスタマイズ

手順

1. 次の手順に従って、メインメニュー項目をカスタマイズします。

   1. app-config-rhdh.yaml ファイルを開きます。
   2. メインメニュー項目の順序と親子関係をカスタマイズするには、dynamicPlugins.frontend.default.main-menu-items.menuItems フィールドを使用します。
   3. 動的プラグインのメニュー項目の場合は、dynamicPlugins.frontend.<package_name>.menuItems フィールドを使用します。

   app-config-rhdh.yaml ファイルの例

   dynamicPlugins:
     frontend:
       <package_name>: # same as `scalprum.name` key in plugin's `package.json`
         menuItems: # optional, allows you to configure plugin menu items in the main sidebar navigation
           <menu_item_name>: # unique name in the plugin menu items list 1
             icon: home | group | category | extension | school | _<your_icon>_  2
             title: My Plugin Page # optional, same as `menuItem.text` in `dynamicRoutes` 3
             priority: 10 # optional, defines the order of menu items in the sidebar 4
             parent: favorites # optional, defines parent-child relationships for nested menu items 5

   前の例のフィールドを変更して、サイドバーメニュー項目の希望する順序と親子関係を設定できます。

   1

   この属性は、メインサイドバーナビゲーション内の一意の名前を表します。スタンドアロンメニュー項目または親メニュー項目のいずれかを表すことができます。この属性がプラグインメニュー項目を表す場合、属性の名前は dynamicRoutes 内の対応するパスと一致する必要があります。たとえば、dynamicRoutes が path: /my-plugin を定義した場合は、menu_item_name を my-plugin として定義する必要があります。

   path: /metrics/users/info などのより複雑な複数セグメントのパスの場合、menu_item_name は metrics.users.info などの完全なパスを表すために、ドット表記を使用する必要があります。パス内の末尾と先頭のスラッシュは無視されます。たとえば、path: /docs は menu_item_name: docs になり、path: /metrics/users は menu_item_name: metrics.users になります。

   2

   このオプション属性は、メニュー項目のアイコンを指定します。デフォルトのアイコンを使用することも、動的プラグインを使用してアイコンセットを拡張することもできます。Developer Hub は、次のような追加のアイコンも内部ライブラリーに提供します。

   内部ライブラリーのホームアイコン

   dynamicPlugins:
     frontend:
       <package_name>:
         menuItems:
           <menu_item_name>:
             icon: home

   同様に、内部ライブラリーには、group、category、extension、school のアイコンが含まれています。アイコンが menuItem.icon の下の dynamicRoutes 設定で定義されている場合は、menuItems 設定から削除できます。また、SVG と HTML の両方のイメージアイコンがサポートされています。以下に例を示します。

   SVG アイコンの例

   icon: <svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#ffffff">...</svg>

   イメージアイコンの例

   icon: https://img.icons8.com/ios-glyphs/20/FFFFFF/shop.png

   3

   このオプション属性は、メニュー項目のタイトルを指定します。dynamicRoutes 設定の menuItem.text でタイトルが指定されている場合は削除できます。

   4

   このオプション属性は、サイドバーに表示されるメニュー項目の順序を設定します。デフォルトの優先度は 0 で、項目はリストの一番下に配置されます。優先度の値が高いほど、その項目はサイドバー内の上の方に表示されます。この属性はセクションごとに定義できます。

   5

   このオプション属性は、現在の項目がネストされる親メニュー項目を指定します。この属性を使用する場合、親メニュー項目は、有効なプラグインの menuItems 設定内の別の場所で定義する必要があります。この属性はセクションごとに定義できます。

   menuItems の設定例

   dynamicPlugins:
     frontend:
       <package_name>:
         dynamicRoutes:
           - path: /my-plugin
             module: CustomModule
             importName: FooPluginPage
             menuItem:
               icon: fooIcon
               text: Foo Plugin Page
         menuItems:
           my-plugin: # matches `path` in `dynamicRoutes`
             priority: 10 # controls order of plugins under the parent menu item
             parent: favorites # nests this plugin under the `favorites` parent menu item
           favorites: # configuration for the parent menu item
             icon: favorite # icon from RHDH system icons
             title: Favorites # title for the parent menu item
             priority: 100 # controls the order of this top-level menu item

2. メニュー項目がメインメニュー項目として識別されるようにするには、そのキーに default. 接頭辞を追加する必要があります。以下に例を示します。

   サイドバーナビゲーションのメインメニュー項目の設定例

   dynamicPlugins:
     frontend:
       default.main-menu-items: # key for configuring static main menu items
         menuItems:
           default.<menu_item_name>: # key of the menu item configuration. `default.` prefix is required for a main menu item key 1
             parent: my_menu_group # optional, specifies the parent menu item for this item
             priority: 10 # optional, specifies the order of this menu item within its menu level
           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 2
             icon: my_menu_group_icon # required for parent menu items, defines the icon for the menu group
             title: my_menu_group_title # required for parent menu items, defines the icon for the menu group
             priority: 100 # optional, specifies the order of the parent menu item in the sidebar

   1 2

   default. 接頭辞は、項目をメインメニュー項目として識別します。前の例では、default.<menu_group_parent_item_name> のように、個々のメニュー項目または親メニューグループ設定の両方に default. 接頭辞を追加できます。

   注記

   メインメニュー項目のデフォルトの優先順位によって、サイドバーでの順序が決まります。優先度の値を調整することで、静的メインメニュー項目の順序をカスタマイズできます。簡単に並べ換えできるように、各項目の優先順位とタイトルが明確であることを確認します。