From 56c1ea56287880958c905400a83f569600f86dd8 Mon Sep 17 00:00:00 2001
From: Mikhail Hryb <iamfreespirit.mg@gmail.com>
Date: Mon, 11 Sep 2017 11:44:04 +0300
Subject: [PATCH] fix(header): header responsive

---
 .../components/header/header.component.html   | 30 ++++++-----
 .../components/header/header.component.scss   | 50 ++++++++++++++++++-
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
index 1e0cd2e8..0ac1e97a 100644
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@@ -1,16 +1,20 @@
 <div class="header-container"
      [class.left]="position === 'normal'"
      [class.right]="position === 'inverse'">
-  <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
-  <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
-  <label class="theme-switch">
-    <span class="light">Light</span>
-    <div class="switch">
-      <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
-      <span class="slider"></span>
-    </div>
-    <span class="cosmic">Cosmic</span>
-  </label>
+  <div class="logo-containter">
+    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="ion-navicon"></i></a>
+    <div class="logo" (click)="goToHome()">NgX&nbsp;<span>Admin</span></div>
+  </div>
+  <div class="switcher-container">
+    <label class="theme-switch">
+      <span class="light">Light</span>
+      <div class="switch">
+        <input type="checkbox" (change)="toggleTheme(theme.checked)" #theme>
+        <span class="slider"></span>
+      </div>
+      <span class="cosmic">Cosmic</span>
+    </label>
+  </div>
 </div>
 
 <nb-actions
@@ -22,9 +26,9 @@
   <nb-action>
     <nb-user [menu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
   </nb-action>
-  <nb-action disabled icon="nb-notifications"></nb-action>
-  <nb-action icon="nb-email"></nb-action>
-  <nb-action>
+  <nb-action class="action-item" disabled icon="nb-notifications"></nb-action>
+  <nb-action class="action-item" icon="nb-email"></nb-action>
+  <nb-action class="action-item">
     <nb-search type="rotate-layout"></nb-search>
   </nb-action>
 </nb-actions>
diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 9e7ae689..7ea95dcb 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -1,5 +1,7 @@
 @import '../../styles/themes';
 @import '~@nebular/theme/styles/global/bootstrap/hero-buttons';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
 
 @include nb-install-component() {
   display: flex;
@@ -7,6 +9,8 @@
   width: 100%;
 
   .left {
+    display: flex;
+    width: 100%;
     order: 0;
     flex-direction: row;
   }
@@ -15,9 +19,26 @@
     flex-direction: row-reverse;
   }
 
+  .logo-containter {
+    display: flex;
+    align-items: center;
+  }
+
+  .switcher-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 50%;
+  }
+
+  .action-item {
+    display: block;
+  }
+
   .header-container {
     display: flex;
     align-items: center;
+    width: 100%;
 
     .navigation {
       padding-right: nb-theme(padding);
@@ -37,7 +58,6 @@
   }
 
   .theme-switch {
-    margin: 0 6rem;
     width: 12rem;
     display: flex;
     justify-content: space-between;
@@ -116,6 +136,7 @@
   }
 
   .toggle-layout /deep/ a {
+    display: block;
     text-decoration: none;
     line-height: 1;
 
@@ -129,5 +150,32 @@
       }
     }
   }
+
+  nb-user /deep/ .user-name {
+    display: block;
+  }
+
+  @include media-breakpoint-down(md) {
+    .action-item {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    nb-user /deep/ .user-name {
+      display: none;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .toggle-layout {
+      display: none;
+    }
+
+    .switcher-container {
+      display: none;
+    }
+  }
 }