Update narik-ngx-admin module

Author: abadakhshan

angular.json

@@ -37,6 +37,8 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css",
+              "node_modules/typeface-exo/index.css",
               "node_modules/ngx-toastr/toastr.css",
               "node_modules/narik-ui-ng-bootstrap/styles/narik-ui-ng-bootstrap.css",
               "node_modules/narik-ui-swimlane/styles/narik-ui-swimlane.css",

package.json

@@ -35,6 +35,8 @@
     "localforage": "^1.7.3",
     "lodash": "^4.17.11",
     "ng2-validation": "^4.2.0",
+    "roboto-fontface": "^0.10.0",
+    "typeface-exo": "0.0.61",
     "narik-app-core": "^2.0.2",
     "narik-client-storage": "^2.0.0",
     "narik-common": "^2.0.1",

src/app/modules/narik-ngx-admin/narik-ngx-admin.module.ts

@@ -11,7 +11,8 @@ import {
   NbSearchModule,
   NbSidebarModule,
   NbSidebarService,
-  NbUserModule
+  NbUserModule,
+  NbIconModule
 } from "@nebular/theme";
 import { RouterModule } from "@angular/router";
 
@@ -25,6 +26,7 @@ import { RouterModule } from "@angular/router";
     NbMenuModule.forRoot(),
     NbSearchModule,
     NbSidebarModule,
+    NbIconModule,
     NbUserModule
   ],
   declarations: [COMPONENTS],

src/app/modules/narik-ngx-admin/ngx-main-view/ngx-main-view.component.html

@@ -3,15 +3,17 @@
     <ngx-view-header [headerTitle]='headerTitle' [position]="'normal'"></ngx-view-header>
   </nb-layout-header>
 
-  <nb-sidebar [end]='false' class="menu-sidebar" tag="menu-sidebar" responsive>
-    <nb-sidebar-header>
+
+  <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
+    <!-- <nb-sidebar-header >
       <a  class="btn btn-hero-success main-btn">
         <i class="nb-menu"></i> <span>{{menuHeader}}</span>
       </a>
-    </nb-sidebar-header>
+    </nb-sidebar-header> -->
     <nb-menu [items]="menuItems"></nb-menu>
   </nb-sidebar>
 
+
   <nb-layout-column>
     <nb-card>
       <nb-card-header>
@@ -21,6 +23,5 @@
         <router-outlet></router-outlet>
       </nb-card-body>
     </nb-card>
-
   </nb-layout-column>
 </nb-layout>

src/app/modules/narik-ngx-admin/ngx-main-view/ngx-main-view.component.scss

@@ -1,6 +1,6 @@
-@import '../../../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@import "../../../../styles/themes";
+@import "~bootstrap/scss/mixins/breakpoints";
+@import "~@nebular/theme/styles/global/breakpoints";
 
 @include nb-install-component() {
   nb-layout-column.small {
@@ -29,129 +29,11 @@
 
     ::ng-deep .main-container {
       width: $sidebar-width;
-      background: nb-theme(color-bg);
       transition: width 0.3s ease;
       overflow: hidden;
-
       .scrollable {
         width: $sidebar-width;
       }
-
-      @include nb-for-theme(cosmic) {
-        background: nb-theme(layout-bg);
-      }
-    }
-  }
-
-  nb-sidebar.menu-sidebar {
-
-    margin-top: nb-theme(sidebar-header-gap);
-
-    @include nb-for-theme(corporate) {
-      margin-top: 0;
-    }
-
-    ::ng-deep .main-container {
-      height:
-        calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)} - #{nb-theme(sidebar-header-gap)}) !important;
-      @include nb-ltr(border-top-right-radius, nb-theme(radius));
-      @include nb-rtl(border-top-left-radius, nb-theme(radius));
-
-      @include nb-for-theme(corporate) {
-        border: 1px solid nb-theme(separator);
-        height:
-          calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-      }
-    }
-
-    ::ng-deep .scrollable {
-      @include nb-for-theme(corporate) {
-        padding-top: 0;
-
-        .menu-item:first-child {
-          border-top: none;
-        }
-      }
-    }
-
-    ::ng-deep nb-sidebar-header {
-      padding-bottom: 0.5rem;
-      text-align: center;
-    }
-
-    background: transparent;
-
-    .main-btn {
-      padding: 0.75rem 2.5rem;
-      margin-top: -2rem;
-      font-weight: bold;
-      transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
-
-      @include nb-for-theme(corporate) {
-        border-radius: nb-theme(radius);
-      }
-
-      i {
-        font-size: 2rem;
-        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-      }
-      span {
-        @include nb-ltr(padding-left, 0.25rem);
-        @include nb-rtl(padding-right, 0.25rem);
-      }
-
-      i, span {
-        vertical-align: middle;
-      }
-    }
-
-    &.compacted {
-
-      ::ng-deep nb-sidebar-header {
-        padding-left: 0;
-        padding-right: 0;
-      }
-
-      .main-btn {
-        width: 46px;
-        height: 44px;
-        padding: 0.375rem;
-        border-radius: 5px;
-        transition: none;
-
-        span {
-          display: none;
-        }
-      }
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .main-content {
-      padding: 0.75rem !important;
-
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-
-    nb-sidebar.menu-sidebar {
-
-      margin-top: 0;
-
-      ::ng-deep .main-container {
-        height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
-        @include nb-ltr(border-top-right-radius, 0);
-        @include nb-rtl(border-top-left-radius, 0);
-
-        .scrollable {
-          padding-top: 0;
-        }
-      }
-    }
-
-    .main-btn {
-      display: none;
     }
   }
 }

src/app/modules/narik-ngx-admin/ngx-view-header/ngx-view-header.component.html

@@ -1,20 +1,17 @@
-<div class="header-container" [class.left]="position === 'normal'" [class.right]="position === 'inverse'">
-  <div class="logo-containter">
-    <a (click)="toggleSidebar()" href="#" class="navigation"><i class="nb-menu"></i></a>
-    <div class="logo" (click)="goToHome()">{{headerTitle}}</div>
+
+<div class="header-container">
+  <div class="logo-container">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+      <nb-icon icon="menu-2-outline"></nb-icon>
+    </a>
+    <a class="logo" href="#" (click)="goToHome()">{{headerTitle}}</a>
   </div>
 </div>
-
 <div class="header-container">
-  <nb-actions size="medium" [class.right]="position === 'normal'" [class.left]="position === 'inverse'">
-    <!-- <nb-action  icon="nb-gear" class="toggle-layout"></nb-action> -->
-    <nb-action style="margin-left:50px">
-      <nb-user nbContextMenuTag="user-context-menu" [nbContextMenu]="userMenu" [name]="user?.title" [picture]="'assets/images/user-avatar.png'"></nb-user>
+  <nb-actions size="small">
+    <nb-action>
+      <nb-user nbContextMenuTag="user-context-menu" [nbContextMenu]="userMenu" [name]="user?.title"
+        [picture]="'assets/images/user-avatar.png'"></nb-user>
     </nb-action>
-    <!-- <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-    <nb-action class="control-item" icon="nb-email"></nb-action>
-    <nb-action class="control-item">
-      <nb-search type="rotate-layout"></nb-search>
-    </nb-action> -->
   </nb-actions>
 </div>