Fixed 'Header' for mobile and tablets.

Author: EugeneIvankin

README.md

@@ -1,4 +1,4 @@
-# Sing App Angular Dashboard - Ngx Admin Template (5.2.2 Full version) with Angular 8.0 Final Release support
+# Sing App Angular Dashboard - Ngx Admin Template (5.2.3 Full version) with Angular 8.0 Final Release support
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3.
 

changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [5.2.3]
+
+### Fixed
+
+- Fixed 'Header' for mobile and tablets.
+
 ## [5.2.2]
 
 ### Updated

src/app/layout/layout.template.html

@@ -1,6 +1,9 @@
 <app-sidebar id="sidebar" role="navigation" class="sidebar"></app-sidebar>
-<app-navbar (toggleSidebarEvent)="toggleSidebarListener($event)"
-     (toggleChatEvent)="toggleChatListener()" class="page-controls navbar navbar-dashboard"></app-navbar>
+<app-navbar
+  (toggleSidebarEvent)="toggleSidebarListener($event)"
+  (toggleChatEvent)="toggleChatListener()"
+  class="page-controls navbar navbar-dashboard"
+></app-navbar>
 <app-chat-sidebar class="chat-sidebar"></app-chat-sidebar>
 <theme-helper></theme-helper>
 <div class="content-wrap" id="content-wrap">

src/app/layout/navbar/navbar.template.html

@@ -10,7 +10,7 @@
     </a>
     <!-- shown on xs & sm screen. collapses and expands navigation -->
     <a (click)="toggleSidebar('collapse')" class="d-lg-none nav-link" href="#" data-html="true" title="Show/hide<br>sidebar" data-placement="bottom">
-      <span class="rounded rounded-lg bg-gray text-white d-md-none"><i class="la la-bars la-lg"></i></span>
+      <span class="rounded rounded-lg text-gray d-md-none"><i class="la la-bars la-lg"></i></span>
       <i class="ml-3 la la-bars la-lg d-none d-md-block d-lg-none"></i>
     </a>
   </li>
@@ -21,19 +21,19 @@
   <li class="nav-item">
     <!-- toggles chat -->
     <a class="nav-link" href="#" (click)="toggleChat()">
-      <span class="rounded rounded-lg bg-gray text-white"><i class="la la-globe la-lg"></i></span>
+      <span class="rounded rounded-lg text-gray"><i class="la la-globe la-lg"></i></span>
     </a>
   </li>
 </ul>
-<a class="navbar-brand d-md-none" [routerLink]=" ['/app/dashboard'] ">
-  <i class="la la-circle la-sm text-gray mr-n-sm"></i>
-  <i class="la la-circle la-sm text-warning"></i>
+<div class="navbar-brand d-md-none navbar-m display-flex align-items-center justify-content-center" [routerLink]=" ['/app/dashboard'] ">
+  <i class="fa fa-circle fa-xs text-primary mr-n-sm"></i>
+  <i class="fa fa-circle fa-xs text-orange"></i>
   &nbsp;
   {{config.name}}
   &nbsp;
-  <i class="la la-circle la-sm text-warning mr-n-sm"></i>
-  <i class="la la-circle la-sm text-gray"></i>
-</a>
+  <i class="fa fa-circle fa-xs text-orange mr-n-sm"></i>
+  <i class="fa fa-circle fa-xs text-primary"></i>
+</div>
 <!-- this part is hidden for xs screens -->
   <!-- search form! link it to your search server -->
 <form class="navbar-form d-none d-md-block mr-auto" role="search">

src/app/pages/login/login.service.ts

@@ -65,7 +65,7 @@ export class LoginService {
           const token = res.token;
           this.receiveToken(token);
         }, err => {
-          this.loginError(err.response.data);
+          this.loginError('Something was wrong. Try again');
         });
 
       } else {

src/app/styles/_bootstrap-override.scss

@@ -933,6 +933,10 @@ legend {
 
   .navbar-nav > .nav-item > .nav-link {
     padding: $nav-link-padding-y $nav-link-padding-x;
+
+    @media (max-width: 768px) {
+      padding: $nav-link-padding-y 0.8rem;
+    }
   }
 
   .navbar-nav {

src/app/styles/_libs-override.scss

@@ -27,6 +27,10 @@
   vertical-align: middle;
 }
 
+.fa-xs {
+  font-size: 0.625em;
+}
+
 .fa-sm {
   font-size: $font-size-sm;
 }

src/app/styles/_variables.scss

@@ -63,6 +63,7 @@ $theme-colors: (
   'success': $teal,
   'info': $purple,
   'warning': $yellow,
+  'orange': $orange,
   'danger': $red,
   'dark': $gray-800,
   'inverse': $gray-700,