refactor: layout & form

src/app/@theme/components/header/header.component.html

@@ -1,8 +1,6 @@
-<div class="header-container"
-     [class.left]="position === 'normal'"
-     [class.right]="position === 'inverse'">
+<div class="header-container">
   <div class="logo-container">
-    <a (click)="toggleSidebar()" href="#" class="navigation">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
       <nb-icon icon="menu-2-outline"></nb-icon>
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin</span></a>
@@ -13,17 +11,15 @@
 </div>
 
 <div class="header-container">
-  <nb-actions
-    size="small"
-    [class.right]="position === 'normal'"
-    [class.left]="position === 'inverse'">
-    <nb-action *nbIsGranted="['view', 'user']" >
-      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
-    </nb-action>
-    <nb-action class="control-item" icon="bell-outline"></nb-action>
-    <nb-action class="control-item" icon="email-outline"></nb-action>
+  <nb-actions size="small">
+
     <nb-action class="control-item">
       <nb-search type="rotate-layout"></nb-search>
     </nb-action>
+    <nb-action class="control-item" icon="email-outline"></nb-action>
+    <nb-action class="control-item" icon="bell-outline"></nb-action>
+    <nb-action *nbIsGranted="['view', 'user']" >
+      <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
+    </nb-action>
   </nb-actions>
 </div>

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

@@ -1,7 +1,5 @@
 @import '../../styles/themes';
-//@import '~bootstrap/scss/mixins/breakpoints';
-//@import '~@nebular/theme/styles/global/breakpoints';
-//
+
 @include nb-install-component() {
   display: flex;
   justify-content: space-between;
@@ -43,13 +41,13 @@
     align-items: center;
     width: auto;
 
-    .navigation {
+    .sidebar-toggle {
       @include nb-ltr(padding-right, 1.25rem);
       @include nb-rtl(padding-left, 1.25rem);
       text-decoration: none;
-
+      color: nb-theme(text-hint-color);
       nb-icon {
-        font-size: 2.5rem;
+        font-size: 1.75rem;
       }
     }
 
@@ -62,155 +60,4 @@
       text-decoration: none;
     }
   }
-//
-//  @include nb-for-theme(corporate) {
-//    $menu-action-separator-color: #3f4550;
-//
-//    nb-action {
-//      @include nb-ltr(border-left-color, $menu-action-separator-color);
-//      @include nb-rtl(border-right-color, $menu-action-separator-color);
-//    }
-//
-//    .header-container .logo {
-//      @include nb-ltr(border, none);
-//      @include nb-rtl(border, none);
-//    }
-//
-//    .header-container ::ng-deep ngx-theme-switcher .dropdown-toggle {
-//      color: nb-theme(color-white);
-//      background: transparent;
-//    }
-//  }
-//
-//  ngx-layout-direction-switcher {
-//    margin: 0 1.5rem;
-//  }
-//
-//  ngx-theme-switcher {
-//    margin: nb-theme(layout-padding);
-//    margin-top: 0;
-//    margin-bottom: 0;
-//  }
-//
-//  @include media-breakpoint-down(xl) {
-//    ngx-layout-direction-switcher {
-//      display: none;
-//    }
-//  }
-//
-//  .toggle-settings ::ng-deep a {
-//    display: block;
-//    text-decoration: none;
-//    line-height: 1;
-//
-//    i {
-//      color: nb-theme(color-fg-highlight);
-//      font-size: 2.25rem;
-//      border-radius: 50%;
-//      position: relative;
-//      animation-name: pulse-light;
-//
-//      &::after {
-//        content: ' ';
-//        // hack to be able to set border-radius
-//        background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
-//        border-radius: 50%;
-//        pointer-events: none;
-//
-//        position: absolute;
-//        top: 52.3%;
-//        left: 50%;
-//        transform: translate(-50%, -50%);
-//        width: 13%;
-//        height: 13%;
-//
-//        animation: 3s linear infinite pulse;
-//
-//        @include nb-for-theme(default) {
-//          animation-name: pulse-light;
-//        }
-//      }
-//    }
-//  }
-//
-//  @include keyframes(pulse) {
-//    0% {
-//      //box-shadow: 0 0 1px 0 rgba(nb-theme(color-fg-highlight), 0);
-//    }
-//    20% {
-//      //box-shadow: 0 0 3px 10px rgba(nb-theme(color-fg-highlight), 0.4);
-//    }
-//    100% {
-//      //box-shadow: 0 0 5px 20px rgba(nb-theme(color-fg-highlight), 0);
-//    }
-//  }
-//
-//  @include keyframes(pulse-light) {
-//    0% {
-//      box-shadow: 0 0 1px 0 rgba(115, 255, 208, 0);
-//    }
-//    20% {
-//      box-shadow: 0 0 3px 10px rgba(115, 255, 208, 0.4);
-//    }
-//    100% {
-//      box-shadow: 0 0 5px 20px rgba(115, 255, 208, 0);
-//    }
-//  }
-//
-//  @include media-breakpoint-down(md) {
-//
-//    nb-action:not(.toggle-settings) {
-//      border: none;
-//    }
-//
-//    .control-item {
-//      display: none;
-//    }
-//
-//    .toggle-settings {
-//      padding: 0;
-//    }
-//
-//    ngx-layout-direction-switcher {
-//      display: none;
-//    }
-//
-//    ngx-theme-switcher {
-//      margin: 0 0.5rem;
-//    }
-//  }
-//
-//  @include media-breakpoint-down(sm) {
-//
-//    nb-user ::ng-deep .user-name {
-//      display: none;
-//    }
-//  }
-//
-//  @include media-breakpoint-down(is) {
-//
-//    .header-container {
-//      .logo {
-//        font-size: 1.25rem;
-//      }
-//    }
-//
-//    .toggle-settings {
-//      display: none;
-//    }
-//
-//    ngx-theme-switcher {
-//      display: none;
-//    }
-//
-//    nb-action:not(.toggle-settings) {
-//      padding: 0;
-//    }
-//  }
-//
-//  @include media-breakpoint-down(xs) {
-//    .right ::ng-deep {
-//      display: none;
-//    }
-//  }
 }

src/app/@theme/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { NbMenuService, NbSidebarService, NbThemeService } from '@nebular/theme';
 
 import { UserData } from '../../../@core/data/users';
@@ -11,8 +11,6 @@ import { LayoutService } from '../../../@core/utils';
 })
 export class HeaderComponent implements OnInit {
 
-  @Input() position = 'normal';
-
   user: any;
 
   themes = [