diff --git a/core/src/core-api/dom-elements.js b/core/src/core-api/dom-elements.js index 07c9f40ad8..0d6ed2e8e9 100644 --- a/core/src/core-api/dom-elements.js +++ b/core/src/core-api/dom-elements.js @@ -109,6 +109,18 @@ class LuigiElements { getCurrentMicrofrontendIframe() { return IframeHelpers.getCurrentMicrofrontendIframe(); } + + /** + * Returns a navigation footer container. + * @returns {HTMLElement} the navigation footer DOM element + * @memberof Elements + * @since NEXTRELEASE + * @example + * Luigi.elements().getNavFooterContainer(); + */ + getNavFooterContainer() { + return document.getElementsByClassName('lui-side-nav__footer')[0]; + } } export const elements = new LuigiElements(); diff --git a/core/src/navigation/LeftNav.svelte b/core/src/navigation/LeftNav.svelte index 0dd1b82c44..f3fa5bc7a8 100644 --- a/core/src/navigation/LeftNav.svelte +++ b/core/src/navigation/LeftNav.svelte @@ -816,8 +816,10 @@ {#if footerText || semiCollapsibleButton}
- - + {footerText ? footerText : ''} {#if semiCollapsibleButton} @@ -1044,7 +1046,7 @@ .lui-side-nav__footer { display: flex; - justify-content: space-between; + justify-content: space-evenly; align-items: center; border-top: var(--sapList_BorderWidth, 0.0625rem) solid var(--sapList_BorderColor, #e4e4e4); @@ -1054,7 +1056,7 @@ color: var(--sapTextColor, #32363a); white-space: nowrap; width: auto; - padding: $footerPaddingVertical 20px; + padding: $footerPaddingVertical 15px; @include transition(all 0.1s linear); text-overflow: ellipsis; overflow: hidden; @@ -1063,7 +1065,7 @@ &--icon { cursor: pointer; - padding: $footerPaddingVertical 20px; + padding: $footerPaddingVertical 15px; } } diff --git a/docs/general-settings.md b/docs/general-settings.md index b84109f677..59ffec9a86 100644 --- a/docs/general-settings.md +++ b/docs/general-settings.md @@ -102,6 +102,7 @@ burgerTooltip = { }; ``` * **sideNavFooterText** is a string displayed in a sticky footer inside the side navigation. It is a good place to display the version of your application. +* **getNavFooterContainer** in addition to **sideNavFooterText** a client can insert custom HTML under the footer section. * **sideNavCompactMode** reduces the dimensions of the side navigation and allows you to display more information. * **customTranslationImplementation** provides a custom localization implementation. It can be an Object or a Function returning an Object. This Object must provide the **getTranslation** Function as property: ```javascript diff --git a/docs/luigi-core-api.md b/docs/luigi-core-api.md index e2599552d8..e5a84ec86e 100644 --- a/docs/luigi-core-api.md +++ b/docs/luigi-core-api.md @@ -347,6 +347,22 @@ Returns **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** t - **since**: 0.4.12 +#### getNavFooterContainer + +Returns a navigation footer container. + +##### Examples + +```javascript +Luigi.elements().getNavFooterContainer(); +``` + +Returns **[HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element)** the navigation footer DOM element + +**Meta** + +- **since**: NEXTRELEASE + ## Luigi.auth() diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js index 1ba78e55b3..ec867de1ba 100644 --- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js +++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js @@ -905,4 +905,35 @@ describe('Fiddle', () => { cy.get('.lui-nav-title .fd-nested-list__title').should('contain', 'test'); }); }); + + describe('Custom text in the footer', () => { + it('checks if the text in footer exist, defined by settings', () => { + cy.window().then(win => { + //define Footer text as part of the global config + const config = win.Luigi.getConfig(); + config.settings.sideNavFooterText = 'Luigi Footer'; + win.Luigi.configChanged(); + + cy.get('[data-testid="lui-side-nav__footer--text"]').should('exist'); + cy.get('[data-testid="lui-side-nav__footer--text"]').contains('Luigi Footer'); + }); + }); + + it('checks if getNavFooterContainer() working', () => { + cy.window().then(win => { + //define Footer text as part of the global config + const config = win.Luigi.getConfig(); + config.settings.sideNavFooterText = 'Luigi Footer'; + win.Luigi.configChanged(); + + //Checks if the DOM element required by getNavFooterContainer() exist + cy.get('[data-testid="lui-side-nav__footer"]').should('exist'); + + const FooterContainer = win.Luigi.elements().getNavFooterContainer(); + + //Checks if Luigi.elements().getNavFooterContainer() reads the appropriate DOM element. + cy.get(FooterContainer).contains('Luigi Footer'); + }); + }); + }); });