Responsive padding for the Shellbar Component

core/src/navigation/TopNav.svelte

@@ -59,6 +59,7 @@
   export let displayCustomSearchResult;
   export let searchResult;
   export let burgerTooltip;
+  export let responsiveShellbarPadding;
 
   let store = getContext('store');
   let contextSwitcherToggle = false;
@@ -109,6 +110,9 @@
         profileTypeSettings = LuigiConfig.getConfigValue(
           'settings.profileType'
         );
+        responsiveShellbarPadding = LuigiConfig.getConfigValue(
+          'settings.header.responsiveShellbarPaddings'
+        );
         productSwitcherConfig = NavigationHelpers.getProductSwitcherConfig();
         globalSearchConfig = LuigiConfig.getConfigValue('globalSearch');
         isGlobalSearchCentered =
@@ -305,9 +309,9 @@
 <svelte:window on:click={closeAllDropdowns} on:blur={closeAllDropdowns} />
 {#if showTopNav}
   <div
-    class="fd-shellbar lui-shellbar-wrapper {hideNavComponent
-      ? 'hideNavComponent'
-      : ''}"
+    class="fd-shellbar {responsiveShellbarPadding
+      ? 'fd-shellbar--responsive-paddings'
+      : ''} lui-shellbar-wrapper {hideNavComponent ? 'hideNavComponent' : ''} "
     tabindex="0"
   >
     <div class="fd-shellbar__group fd-shellbar__group--product">
@@ -809,8 +813,8 @@
   .fd-shellbar:focus {
     outline: none;
   }
-
-  .fd-shellbar {
+  
+  .fd-shellbar:not(.fd-shellbar--responsive-paddings) {
     padding: 0 0.5rem;
   }
 

docs/general-settings.md

@@ -160,6 +160,17 @@ Take a look at our [i18n](i18n.md) section for an implementation suggestion.
   },
 ```
 
+### header.responsiveShellbarPaddings
+- **type**: boolean
+- **description**: based on the browser window size the responsiv padding will be applied to the Shellbar Component when set to `true`.
+- **default**: by default, the parameter is set to `false` and the padding for Shellbar Component will stay the same and inherited from `.fd-shellbar` class.
+- **example**: 
+```
+ header: {  object / function / Promise
+   responsiveTopNavPaddings: true
+  },
+```
+
 ### responsiveNavigation
 - **description**: allows customizing the navigation display settings. For example, you can define a button which shows or completely hides the left navigation, or a button which collapses the navigation to only show the icons.
 You can set the following values:

test/e2e-test-application/e2e/tests/1-angular/navigation-4.spec.js

@@ -253,7 +253,7 @@ describe('Navigation', () => {
       cy.visitLoggedIn('/projects/pr2');
     });
 
-    it.only('withOptions - no context updated -> it should remain on the current page', () => {
+    it('withOptions - no context updated -> it should remain on the current page', () => {
       cy.expectPathToBe('/projects/pr2');
       cy.getIframeBody().then(result => {
         // Link on Main page PR2 exists

test/e2e-test-application/src/luigi-config/extended/settings.js

@@ -6,7 +6,8 @@ class Settings {
       'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTIuMzggMjA0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsLXJ1bGU6ZXZlbm9kZH0uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCl9LmNscy0ye2ZpbGw6I2ZmZn08L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMjA2LjE5IiB4Mj0iMjA2LjE5IiB5Mj0iMjA0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDBiOGYxIi8+PHN0b3Agb2Zmc2V0PSIuMDIiIHN0b3AtY29sb3I9IiMwMWI2ZjAiLz48c3RvcCBvZmZzZXQ9Ii4zMSIgc3RvcC1jb2xvcj0iIzBkOTBkOSIvPjxzdG9wIG9mZnNldD0iLjU4IiBzdG9wLWNvbG9yPSIjMTc3NWM4Ii8+PHN0b3Agb2Zmc2V0PSIuODIiIHN0b3AtY29sb3I9IiMxYzY1YmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZTVmYmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+U0FQX2dyYWRfUl9zY3JuX1plaWNoZW5mbMOkY2hlIDE8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMjA0aDIwOC40MUw0MTIuMzggMEgwdjIwNCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI0NC43MyAzOC4zNmgtNDAuNnY5Ni41MmwtMzUuNDYtOTYuNTVoLTM1LjE2bC0zMC4yNyA4MC43MkMxMDAgOTguNyA3OSA5MS42NyA2Mi40IDg2LjQgNTEuNDYgODIuODkgMzkuODUgNzcuNzIgNDAgNzJjLjA5LTQuNjggNi4yMy05IDE4LjM4LTguMzggOC4xNy40MyAxNS4zNyAxLjA5IDI5LjcxIDhsMTQuMS0yNC41NUM4OS4wNiA0MC40MiA3MSAzNi4yMSA1Ni4xNyAzNi4xOWgtLjA5Yy0xNy4yOCAwLTMxLjY4IDUuNi00MC42IDE0LjgzQTM0LjIzIDM0LjIzIDAgMCAwIDUuNzcgNzQuN0M1LjU0IDg3LjE1IDEwLjExIDk2IDE5LjcxIDEwM2M4LjEgNS45NCAxOC40NiA5Ljc5IDI3LjYgMTIuNjIgMTEuMjcgMy40OSAyMC40NyA2LjUzIDIwLjM2IDEzQTkuNTcgOS41NyAwIDAgMSA2NSAxMzVjLTIuODEgMi45LTcuMTMgNC0xMy4wOSA0LjEtMTEuNDkuMjQtMjAtMS41Ni0zMy42MS05LjU5TDUuNzcgMTU0LjQyYTkzLjc3IDkzLjc3IDAgMCAwIDQ2IDEyLjIyaDIuMTFjMTQuMjQtLjI1IDI1Ljc0LTQuMzEgMzQuOTItMTEuNzEuNTMtLjQxIDEtLjg0IDEuNDktMS4yOGwtNC4xMiAxMC44NUgxMjNsNi4xOS0xOC44MmE2Ny40NiA2Ny40NiAwIDAgMCAyMS42OCAzLjQzIDY4LjMzIDY4LjMzIDAgMCAwIDIxLjE2LTMuMjVsNiAxOC42NGg2MC4xNHYtMzloMTMuMTFjMzEuNzEgMCA1MC40Ni0xNi4xNSA1MC40Ni00My4yIDAtMzAuMTEtMTguMjItNDMuOTQtNTcuMDEtNDMuOTR6TTE1MC45MSAxMjFhMzYuOTMgMzYuOTMgMCAwIDEtMTMtMi4yOGwxMi44Ny00MC41OWguMjJsMTIuNjUgNDAuNzFhMzguNSAzOC41IDAgMCAxLTEyLjc0IDIuMTZ6bTk2LjItMjMuMzNoLTguOTRWNjQuOTFoOC45NGMxMS45MyAwIDIxLjQ0IDQgMjEuNDQgMTYuMTQgMCAxMi42LTkuNTEgMTYuNTctMjEuNDQgMTYuNTciLz48L3N2Zz4=',
     title: 'Luigi Demo',
     subTitle: version || 'unknown',
-    favicon: '/assets/favicon-sap.ico'
+    favicon: '/assets/favicon-sap.ico',
+    responsiveShellbarPaddings: false
   };
   appLoadingIndicator = {
     hideAutomatically: false