diff --git a/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js b/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js index 92acdc5c11..3de864db6a 100644 --- a/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js +++ b/core/examples/luigi-sample-angular/src/luigi-config/extended/navigation.js @@ -272,8 +272,11 @@ class Navigation { return items; }; - // The following configuration will be used to render a product switcher component + // The following configuration will be used to render a product switcher at the end of the top navigation productSwitcher = { + label: 'My Products', + icon: 'grid', + // icon: '/assets/favicon-sap.ico', items: this.getProductSwitcherItems }; diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html index 87aebfce4e..472b718ace 100644 --- a/core/src/navigation/ProductSwitcher.html +++ b/core/src/navigation/ProductSwitcher.html @@ -7,13 +7,28 @@
+ + {#if hasOpenUIicon(config)} + {:else} + + {/if}
-
My Products
+
{config.label}
@@ -112,13 +127,9 @@
My Products
export default { async oncreate() { StateHelpers.doOnStoreChange(this.store, async () => { - const productSwitcherConfig = LuigiConfig.getConfigValue( - 'navigation.productSwitcher' - ); - this.set({ - config: productSwitcherConfig - }); - if (productSwitcherConfig) { + const config = NavigationHelpers.getProductSwitcherConfig(); + this.set({ config }); + if (config) { const productSwitcherItems = await LuigiConfig.getConfigValueAsync( 'navigation.productSwitcher.items' ); diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 1112ab0767..54f225dba0 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -208,8 +208,17 @@ on:click="openMobileProductSwitcher(event)" data-cy="mobile-product-switcher" > - - My Products + {#if hasOpenUIicon(productSwitcherConfig) || !productSwitcherConfig.icon} + + {:else} + + {/if} + {productSwitcherConfig.label} {/if} @@ -336,7 +345,8 @@ ), responsiveNavSetting: LuigiConfig.getConfigValue( 'settings.responsiveNavigation' - ) + ), + productSwitcherConfig: NavigationHelpers.getProductSwitcherConfig() }); }); this.set({ diff --git a/core/src/utilities/helpers/navigation-helpers.js b/core/src/utilities/helpers/navigation-helpers.js index b1aae70bae..bef53b8607 100644 --- a/core/src/utilities/helpers/navigation-helpers.js +++ b/core/src/utilities/helpers/navigation-helpers.js @@ -9,6 +9,11 @@ class NavigationHelpersClass { this.virtualGroupPrefix = '___'; } + getProductSwitcherConfig() { + const userConfig = LuigiConfig.getConfigValue('navigation.productSwitcher'); + return Object.assign({ icon: 'grid', label: 'My Products' }, userConfig); + } + isNodeAccessPermitted(nodeToCheckPermissionFor, parentNode, currentContext) { if (LuigiAuth.isAuthorizationEnabled()) { const loggedIn = AuthHelpers.isLoggedIn(); diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md index c3d7a94e0c..59ac7a1f8c 100644 --- a/docs/navigation-parameters-reference.md +++ b/docs/navigation-parameters-reference.md @@ -131,7 +131,26 @@ Luigi.setConfig({ link: '/projects/pr1' } ] - } + }, + productSwitcher: { + label: 'My Products', + icon: 'grid', + items: [ + { + icon: '', + label: 'Luigi in Github', + externalLink: { + url: 'https://github.com/SAP/luigi', + sameWindow: false + } + }, + { + icon: '', + label: 'Project 1', + link: '/projects/pr1' + } + ] + }, } }); ``` @@ -199,7 +218,7 @@ The node parameters are as follows: ## Context switcher -The context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments. +The context switcher is a drop-down list available in the top navigation bar. It allows you to switch between a curated list of navigation elements such as Environments. To do so, add the **contextSwitcher** property to the **navigation** object using the following optional properties: - **defaultLabel** specifies the default label that is shown if no context is selected. - **parentNodePath** specifies the base path, that is prepended to **options[].pathValue**. It must be an absolute path. @@ -231,3 +250,16 @@ The profile section is a configurable drop-down list available in the top naviga - **url** is the external URL that the link leads to. +## Product switcher + +The product switcher is a pop-up window available in the top navigation bar. It allows you to switch between the navigation elements displayed in the pop-up. To do so, add the **productSwitcher** property to the **navigation** object using the following optional properties: + +- **label** defines the label of the product switcher. It is displayed as a title attribute on hover in the top navigation and as a headline in the mobile pop-up. +- **icon** is the name of an icon, without the `sap-icon--` prefix. Its source may be [OpenUI](https://openui5.hana.ondemand.com/1.40.10/iconExplorer.html) or a custom link (relative or absolute) to an image. The icon is displayed without label in the top navigation. +- **items** is an array of objects, each one being a link to a Luigi navigation node or an external URL. An item can have the following parameters: + - **label** defines the text for the link. + - **icon** is the name of an icon from the [OpenUI](https://openui5.hana.ondemand.com/1.40.10/iconExplorer.html) or a custom link (relative or absolute) to an image displayed next to the label or instead of it. + - **link** defines an absolute link to a **node**. + - **externalLink** is an object which indicates that the node links to an external URL. If this parameter is defined, the **link** parameter is ignored. It has the following properties: + - **sameWindow** defines if the external URL is opened in the current tab or in a new one. The default value for this parameter is `false`. + - **url** is the external URL that the link leads to.