fix(header): links overflow

After adding new items we need to hide links earlier.

docs/app/@theme/components/header/header.component.scss

@@ -16,6 +16,8 @@
   $menu-item-fg-active: nb-theme(header-menu-fg-active);
   $contacts-fg: nb-theme(color-fg-heading-light);
   $contacts-active-fg: nb-theme(header-menu-fg-active);
+  $menu-sm-padding: 0.675rem 0.375rem;
+  $menu-md-padding: 0.675rem 1.375rem;
 
   display: flex;
   flex: 1 0 auto;
@@ -39,6 +41,7 @@
 
     &.middle {
       flex: 1;
+      justify-content: flex-end;
     }
   }
 
@@ -65,6 +68,7 @@
     display: none;
     align-items: center;
     padding-right: 2rem;
+    margin-left: auto;
 
     i {
       margin-right: 0.5rem;
@@ -75,14 +79,12 @@
 
     .menu-items {
       display: flex;
-      justify-content: flex-start;
 
       .menu-item {
         border: none;
-        width: 5.375rem;
 
         a {
-          padding: 0.675rem 1.375rem;
+          padding: $menu-sm-padding;
           color: $menu-item-fg;
           display: block;
 
@@ -110,10 +112,19 @@
     }
   }
 
+  ::ng-deep ngx-material-theme-link a.material-theme-link {
+    padding: $menu-sm-padding;
+  }
+
   @include media-breakpoint-up(is) {
-    .section {
+    .section.left,
+    .section.right {
       padding: 0.875rem 0;
     }
+
+    .section.middle {
+      justify-content: flex-start;
+    }
   }
 
   @include media-breakpoint-up(sm) {
@@ -130,8 +141,12 @@
         display: inline;
       }
     }
-    .backend-bundles {
-      display: flex;
+
+    ::ng-deep {
+      nb-menu .menu-items .menu-item a,
+      ngx-material-theme-link a.material-theme-link {
+        padding: $menu-md-padding;
+      }
     }
   }
 
@@ -149,6 +164,10 @@
     ::ng-deep nb-menu .menu-items li:nth-child(2) {
       display: list-item;
     }
+
+    .backend-bundles {
+      display: flex;
+    }
   }
 
   @include media-breakpoint-up(lg) {
@@ -248,13 +267,11 @@
       flex-basis: auto;
     }
 
-    @include media-breakpoint-up(is) {
+    @include media-breakpoint-up(sm) {
       ::ng-deep nb-menu .menu-items li:first-child {
         display: list-item;
       }
-    }
 
-    @include media-breakpoint-up(sm) {
       .section.middle {
         justify-content: space-between;
       }
@@ -264,9 +281,6 @@
         height: 1.25rem;
         margin-left: auto;
       }
-      .backend-bundles {
-        display: flex;
-      }
     }
 
     @include media-breakpoint-up(lg) {

docs/app/shared/components/material-theme-link/material-theme-link.component.html

@@ -2,7 +2,7 @@
   <nb-badge text="New!" status="danger" position="top right"></nb-badge>
 <a
   routerLink="/material"
-  class="eva-parent-hover"
+  class="material-theme-link eva-parent-hover"
   [nbPopover]="popoverContent"
   nbPopoverPlacement="bottom"
   nbPopoverTrigger="noop"