fix: (Core) remove responsive paddings when Shellbar is used with Sid…

…e Nav (#4566)

* fix: (Core) remove responsive paddings when Shellbar is used with Side Nav

* remove unnecessary type

apps/docs/src/app/core/component-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.html

@@ -1,4 +1,4 @@
-<fd-shellbar class="fd-shellbar-navigation-custom">
+<fd-shellbar [sideNav]="true">
     <button
         fd-shellbar-side-nav
         fd-button

apps/docs/src/app/core/component-docs/shellbar/examples/shellbar-side-nav/shellbar-side-nav-example.component.scss

@@ -2,12 +2,6 @@
     display: none;
 }
 
-.fd-shellbar-navigation-custom {
-    .fd-shellbar {
-        padding: 0;
-    }
-}
-
 .shellbar-sidenav-content-example {
     display: flex;
     align-items: flex-start;

apps/docs/src/app/core/component-docs/shellbar/shellbar-docs.component.html

@@ -35,8 +35,8 @@
     Shellbar with SideNavigation
 </fd-docs-section-title>
 <description>
-    There is used <code>sideNavigation</code> in the <code>Shellbar</code> component. To add some control button, it is
-    mandatory to use <code>fd-shellbar-side-nav</code>, which will be placed in the left side of shellbar.
+    When Shellbar is used together with Vertical Navigation (aka Side Navigation) set the 
+    <code>sideNav</code> property to <b>true</b>. This will remove the responsive paddings applied on different screen sizes and will align vertically the control button with the items in the Side Navigation. The control button, situated on the far left hand-side of the Shellbar, is responsible for switching the modes of the Side Navigation (expanded, condensed and off-screen) and requires the <code>fd-shellbar-side-nav</code> directive.
 </description>
 <component-example>
     <fd-shellbar-side-nav-example></fd-shellbar-side-nav-example>

libs/core/src/lib/shellbar/shellbar.component.html

@@ -1,4 +1,7 @@
-<div class="fd-shellbar" [ngClass]="'fd-shellbar--' + size">
+<div 
+    class="fd-shellbar" 
+    [ngClass]="'fd-shellbar--' + size"
+    [class.fd-shellbar--side-nav]="sideNav">
     <div class="fd-shellbar__group fd-shellbar__group--product">
         <ng-content select="[fd-shellbar-side-nav]"></ng-content>
         <ng-content select="fd-shellbar-logo"></ng-content>

libs/core/src/lib/shellbar/shellbar.component.scss

@@ -21,5 +21,21 @@
 
 	.fd-shellbar__group {
 		flex-basis: auto;
-	}
+    }
+
+    &--side-nav {
+        &.fd-shellbar--s,
+        &.fd-shellbar--m,
+        &.fd-shellbar--l,
+        &.fd-shellbar--xl {
+            padding: 0 0.5rem 0 0;
+
+            @at-root {
+                [dir="rtl"] &,
+                &[dir="rtl"] {
+                    padding: 0 0 0 0.5rem;
+                }
+            }   
+        }
+    }
 }

libs/core/src/lib/shellbar/shellbar.component.ts

@@ -33,6 +33,13 @@ export class ShellbarComponent implements AfterContentInit {
     @Input()
     size: ShellbarSizes = 'm';
 
+    /** 
+     * Whether the Shellbar is used with Side Navigation 
+     * When set to true, the responsive paddings are not applied
+     */
+    @Input()
+    sideNav = false;
+
     /** @hidden */
     @ContentChild(ComboboxComponent, { static: false })
     comboboxComponent: ComboboxComponent;