layout

.angular-cli.json

@@ -19,9 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "of",
       "styles": [
-        "theme.scss",
+        "theme/theme.scss",
-        "styles.scss",
+        "theme/typography.scss"
-        "../node_modules/@covalent/core/common/platform.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

package.json

@@ -17,6 +17,7 @@
     "@angular/common": "^5.2.1",
     "@angular/compiler": "^5.2.1",
     "@angular/core": "^5.2.1",
+    "@angular/flex-layout": "^2.0.0-beta.12",
     "@angular/forms": "^5.2.1",
     "@angular/material": "^5.1.0",
     "@angular/platform-browser": "^5.2.1",
@@ -34,6 +35,7 @@
     "@ngrx/store-devtools": "^5.0.1",
     "core-js": "^2.5.3",
     "hammerjs": "^2.0.8",
+    "ngx-perfect-scrollbar": "^5.3.1",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.20"
   },

src/app/commons/layouts/footer/footer.component.html

@@ -1,5 +0,0 @@
-<td-layout-footer>
-  <div layout="row" layout-align="start center">
-      <span class="mat-caption">Copyright &copy; 2017 Loafle. All rights reserved</span>
-  </div>
-</td-layout-footer>

src/app/commons/layouts/header/header.component.html

@@ -1,11 +1,12 @@
-<div td-toolbar-content layout="row" layout-align="start center" flex>
+<mat-toolbar class="mat-elevation-z4">
-  <button mat-icon-button class="td-menu-button" (click)="sidenav.toggle()" mdTooltip="Main menu">
+    <button mat-icon-button (click)="sidenav.toggle();drawer.toggle();" *ngIf="matDrawerShow">
-      <mat-icon>menu</mat-icon>
+        <i class="material-icons app-toolbar-menu">menu </i>
-  </button>
+    </button>
-  <mat-icon class="mat-icon-logo"></mat-icon>
+    <button mat-icon-button (click)="sidenav.toggle();" *ngIf="!matDrawerShow">
-  <span>overFlow</span>
+        <i class="material-icons app-toolbar-menu">menu </i>
-  <span flex></span>
+    </button>
-  <button mat-icon-button>
+    <span class="spacer"></span>
-      <mat-icon>notifications</mat-icon>
+
-  </button>
+    <of-notification [notifications]="toolbarHelpers?.notifications"></of-notification>
-</div>
+    
+</mat-toolbar>

src/app/commons/layouts/header/header.component.scss

@@ -0,0 +1,17 @@
+:host {
+    z-index: 4;
+  }
+  
+  .main-toolbar {
+    height: 64px;
+    padding-left: 16px;
+  }
+  
+  .more-btn {
+    height: 100%;
+    min-width: 70px;
+  }
+  
+  .mat-icon-button {
+    margin-right: 10px;
+  }

src/app/commons/layouts/header/header.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { ToolbarHelpers } from './toolbar.helpers';
 
 @Component({
   selector: 'of-header',
@@ -7,6 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
+  @Input() sidenav;
+  @Input() sidebar;
+  @Input() drawer;
+  @Input() matDrawerShow;
+
+  searchOpen = false;
+  toolbarHelpers = ToolbarHelpers;
+
   constructor() { }
 
   ngOnInit() {

src/app/commons/layouts/header/toolbar.helpers.ts

@@ -0,0 +1,22 @@
+export const ToolbarHelpers = {
+    notifications: [
+        {
+            id: 'id',
+            title: 'Mail 5',
+            lastTime: '23 Minutes ago',
+            state: 'state'
+        },
+        {
+            id: 'id',
+            title: 'Mail 5',
+            lastTime: '23 Minutes ago',
+            state: 'state'
+        },
+        {
+            id: 'id',
+            title: 'Mail 5',
+            lastTime: '23 Minutes ago',
+            state: 'state'
+        },
+    ],
+};

src/app/commons/layouts/layouts.module.ts

@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
+import { MenuItemComponent } from './menu-item/menu-item.component';
+
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [SidebarComponent, HeaderComponent, FooterComponent]
+  declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent]
 })
 export class LayoutsModule { }

src/app/commons/layouts/menu-item/menu-item.component.html

@@ -0,0 +1,19 @@
+<mat-nav-list  [style.height]="getHeight()" [ngClass]="{'secondaryMenu': secondaryMenu}">
+
+  <mat-list-item *ngIf = "menu.link==false" (click)="menu.open = !menu.open" >
+    
+    <mat-icon matListIcon iconsmall  >{{menu.icon}} </mat-icon>
+
+      <h3 matLine *ngIf="!iconOnly">{{ menu.name }} </h3>
+      <mat-chip-list *ngIf="menu?.chip && !iconOnly">
+          <mat-chip >{{menu?.chip?.value}} </mat-chip>
+      </mat-chip-list>        
+      <mat-icon *ngIf="chechForChildMenu()" class="sidenav-dropdown-indicator rotate " [ngClass]="{'indicateOpen':menu.open}"> expand_more</mat-icon>
+  
+  </mat-list-item>
+  <mat-list-item *ngIf = "menu.link!=false" (click)="menu.open = !menu.open" [routerLink]="[menu.link]">
+    <mat-icon matListIcon iconsmall  >{{menu.icon}} </mat-icon>
+      <h3 matLine *ngIf="!iconOnly">{{ menu.name }} </h3>
+  </mat-list-item>
+  <of-menu-item *ngFor="let submenu of menu?.sub" [menu]="submenu" [iconOnly]="iconOnly" [secondaryMenu]="true"> </of-menu-item>
+</mat-nav-list>

src/app/commons/layouts/menu-item/menu-item.component.scss

@@ -0,0 +1,38 @@
+@mixin mat-list-icon($size: 24px) {
+    font-size: $size;
+    height: $size;
+    width: $size;
+}
+@mixin mat-chip() {
+    padding: 1px 7px;
+}
+
+@mixin menu-item($theme,$icon-size) {
+    .sidenav-dropdown-indicator {
+        transition: transform .25s;
+        &.indicateOpen {
+            transform: rotate(180deg);
+        }
+    }
+    mat-nav-list {
+        overflow: hidden;
+        height: 48px;
+        transition: height .4s cubic-bezier(.35, 0, .25, 1);  
+    }
+
+    .secondaryMenu {
+        background:  mat-color($primary, 500); ;
+    }
+
+    .mat-nav-list .mat-list-item .mat-list-icon{
+        @include mat-list-icon($icon-size);
+    }
+    .mat-chip:not(.mat-basic-chip){
+        @include mat-chip()
+    }
+    .mat-nav-list .mat-list-item {
+        font-size: 14px;
+    }
+
+  
+}

src/app/commons/layouts/menu-item/menu-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuItemComponent } from './menu-item.component';
+
+describe('MenuItemComponent', () => {
+  let component: MenuItemComponent;
+  let fixture: ComponentFixture<MenuItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/commons/layouts/menu-item/menu-item.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-menu-item',
+  templateUrl: './menu-item.component.html',
+  styleUrls: ['./menu-item.component.scss']
+})
+export class MenuItemComponent implements OnInit {
+
+  @Input() menu;
+  @Input() iconOnly: boolean;
+  @Input() secondaryMenu = false;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  openLink() {
+    this.menu.open = this.menu.open;
+  }
+  getHeight() {
+
+    if (this.menu.open === false) {
+      return '48px';
+    } else {
+      if (this.menu && this.menu.sub) {
+        const height = (this.menu.sub.length * 56) + 56 + 'px';
+        return height;
+      }
+    }
+  }
+
+  chechForChildMenu() {
+    return (this.menu && this.menu.sub) ? true : false;
+  }
+}

src/app/commons/layouts/sidebar/menu-element.ts

@@ -1,312 +1,83 @@
 export const menus = [
     {
-        'name': 'Dashboard',
+        'name': 'Home',
-        'icon': 'dashboard',
+        'icon': 'home',
-        'link': false,
+        'link': '/home',
-        'open': false,
+        'open': true,
-        'chip': { 'value': 1, 'color': 'accent' },
-        'sub': [
-            {
-                'name': 'Dashboard',
-                'link': '/auth/dashboard',
-                'icon': 'dashboard',
-                'chip': false,
-                'open': true,
-            }
-
-        ]
     },
     {
-        'name': 'Material Widget',
+        'name': 'Infra',
         'icon': 'widgets',
         'link': false,
         'open': false,
         'sub': [
             {
-                'name': 'Buttons',
+                'name': 'Map',
-                'link': 'material-widgets/buttons',
+                'link': '/auth/signin',
                 'icon': 'indeterminate_check_box',
                 'chip': false,
                 'open': false,
             },
             {
-                'name': 'List',
+                'name': 'Sensors',
-                'link': 'material-widgets/list',
+                'link': '',
-                'icon': 'list',
+                'icon': 'indeterminate_check_box',
                 'chip': false,
                 'open': false,
             },
             {
-
+                'name': 'Probes',
-                'name': 'Stepper',
+                'link': '',
-                'link': 'material-widgets/stepper',
+                'icon': 'indeterminate_check_box',
-                'icon': 'view_week',
                 'chip': false,
                 'open': false,
-
-            },
-            {
-                'name': 'Expansion',
-                'link': 'material-widgets/expansion',
-                'icon': 'web_aaset',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'Progress Spinner',
-                'link': 'material-widgets/spinner',
-                'icon': 'cached',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'Cards',
-                'link': 'material-widgets/cards',
-                'icon': 'crop_16_9',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'Icons',
-                'link': 'material-widgets/icons',
-                'icon': 'gif',
-                'chip': false,
-                'open': false,
-            },
-            {
-
-                'name': 'AutoComplete',
-                'link': 'material-widgets/autocomplete',
-                'icon': 'get_app',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'CheckBox',
-                'link': 'material-widgets/checkbox',
-                'icon': 'check_box',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'DatePicker',
-                'link': 'material-widgets/datepicker',
-                'icon': 'date_range',
-                'chip': false,
-                'open': false,
-            },
-
-            {
-                'name': 'Slider',
-                'link': 'material-widgets/slider',
-                'icon': 'keyboard_tab',
-                'chip': false,
-                'open': false,
-
-            },
-            {
-                'name': 'Slide Toggle',
-                'link': 'material-widgets/slide-toggle',
-                'icon': 'album',
-                'chip': false,
-                'open': false,
-
-
-            },
-            {
-                'name': 'Menu',
-                'icon': 'menu',
-                'link': 'material-widgets/menu',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'Progress Bar',
-                'link': 'material-widgets/progress-bar',
-                'icon': 'trending_flat',
-                'chip': false,
-                'open': false,
-
-            },
-            {
-                'name': 'Input',
-                'icon': 'input',
-                'link': 'material-widgets/input',
-                'open': false,
-            },
-            {
-                'name': 'Radio',
-                'icon': 'radio_button_checked',
-                'link': 'material-widgets/radio',
-                'chip': false,
-                'open': false,
-            },
-            {
-                'name': 'Select',
-                'icon': 'select_all',
-                'link': 'material-widgets/select',
-                'open': false,
             },
         ]
     },
-    // {
-    //     'name'   : 'Forms',
-    //     'icon'   : 'mode_edit',
-    //     'open'   : false,
-    //     'link'   : false,
-    //     'sub'    :  [
-    //                     {
-    //                         'name': 'Template Driven',
-    //                         'icon': 'mode_edit',
-    //                         'open'   : false,
-    //                         'link':'forms/template_forms'
-    //                     },
-    //                     {
-    //                         'name': 'Reactive Forms',
-    //                         'icon': 'text_fields',
-    //                         'open'   : false,
-    //                         'link':'forms/reactive_forms'
-    //                     }
-    //                 ]
-    // },
     {
-        'name': 'Tables',
+        'name': 'Monitor',
-        'icon': 'list',
+        'icon': 'widgets',
         'link': false,
         'open': false,
-        'chip': { 'value': 2, 'color': 'accent' },
         'sub': [
             {
-                'name': 'Fixed',
+                'name': 'Overview',
-                'icon': 'filter_list',
+                'link': '',
-                'link': 'tables/fixed',
+                'icon': 'indeterminate_check_box',
+                'chip': false,
                 'open': false,
             },
             {
-                'name': 'Feature',
+                'name': 'Dashboards',
-                'icon': 'done_all',
+                'link': '',
-                'link': 'tables/featured',
+                'icon': 'indeterminate_check_box',
+                'chip': false,
                 'open': false,
             },
-            {
-                'name': 'Responsive Tables',
-                'icon': 'filter_center_focus',
-                'link': 'tables/responsive',
-                'open': false,
-            }
         ]
-
     },
     {
-        'name': 'Guarded Routes',
+        'name': 'Alert',
-        'icon': 'mode_edit',
+        'icon': 'warning',
-        'link': '/auth/guarded-routes',
+        'link': '',
-        'open': false,
+        'open': true,
-
+    },
-
+    {
-    }, {
+        'name': 'Report',
-        'name': 'Scrumboard',
+        'icon': '',
-        'open': false,
+        'link': '',
-        'link': '/auth/scrumboard',
+        'open': true,
-        'icon': 'grade',
+    },
-    }, {
+    {
-        'name': 'Applications',
+        'name': 'Log',
-        'icon': 'view_module',
+        'icon': '',
-        'open': false,
+        'link': '',
-        'link': false,
+        'open': true,
-        'sub': [
+    },
-            {
+    {
-                'name': 'chat',
+        'name': 'Setting',
-                'icon': 'chat',
+        'icon': '',
-                'link': 'chats/chat',
+        'link': '',
-                'open': false,
+        'open': true,
-            },
+    },
-            {
-                'name': 'mail',
-                'icon': 'mail',
-                'link': 'mail/mail',
-                'open': false,
-            },
-            {
-                'name': 'Editor',
-                'icon': 'editor',
-                'link': 'editor/editor',
-                'open': false,
-            }
-        ]
-    }
-    , {
-        'name': 'Pages',
-        'icon': 'content_copy',
-        'open': false,
-        'link': false,
-        'sub': [
-            {
-                'name': 'Login',
-                'icon': 'work',
-                'open': false,
-                'link': '../login',
-            }, {
-                'name': 'Services',
-                'icon': 'local_laundry_service',
-                'open': false,
-                'link': 'pages/services',
-            }, {
-                'name': 'Contact',
-                'icon': 'directions',
-                'open': false,
-                'link': 'pages/contact'
-            }
-        ]
-    }
-    , {
-
-        'name': 'Charts',
-        'icon': 'pie_chart_outlined',
-        'open': false,
-        'link': false,
-        'sub': [
-            {
-                'name': 'chartjs',
-                'icon': 'view_list',
-                'link': 'charts/chartjs',
-                'open': false,
-
-            },
-            {
-                'name': 'ngx-chart',
-                'icon': 'show_chart',
-                'open': false,
-                'link': 'charts/ngx-charts',
-            },
-            {
-                'name': 'nvd3',
-                'icon': 'pie_chart',
-                'open': false,
-                'link': 'charts/nvd3-charts',
-            }
-
-        ]
-    }, {
-        'name': 'maps',
-        'icon': 'map',
-        'open': false,
-        'link': false,
-        'sub': [
-            {
-                'name': 'google-map',
-                'icon': 'directions',
-                'link': 'maps/googlemap',
-                'open': false,
-            },
-            {
-                'name': 'leaflet-map',
-                'icon': 'directions',
-                'link': 'maps/leafletmap',
-                'open': false,
-            }
-        ]
-    }
-
-
 ];

src/app/commons/layouts/sidebar/sidebar.component.html

@@ -1,57 +1,13 @@
-<mat-sidenav #sidenav mode="side" opened="true" style="width:257px;border-right:1px solid #ccc">
+<perfect-scrollbar style="height: calc(100% - 33px);">
-  <div flex class="mat-content bgc-grey-50">
-    <mat-nav-list td-sidenav-content class="bgc-purple-900">
 
-      <h3 mat-header class="tc-white">
+  <div fxLayout="column" >
-        User profile area
+      <!-- <div *ngIf="!iconOnly" fxLayoutAlign="space-around center" [style.margin]="'10px 0px'" >
-      </h3>
+        <img width="100" [style.borderRadius]="'50%'" src="./assets/images/user-image.jpg">
-      <mat-divider></mat-divider>
+      </div>
-
+      <div *ngIf="iconOnly" style="height: 100px;" fxLayoutAlign="space-around center"  >
-      <a mat-list-item class="tc-white" routerLink="">
+          <img width="50" [style.borderRadius]="'50%'" src="./assets/images/user-image.jpg">
-        <mat-icon class="tc-white" matListIcon>home</mat-icon> Home
+      </div> -->
-      </a>
+      <of-menu-item *ngFor="let menu of menus" [menu]="menu" [iconOnly]="iconOnly"> </of-menu-item>
-      <mat-divider></mat-divider>
-
-      <h3 mat-subheader class="tc-white">
-        INFRA
-      </h3>
-      <a mat-list-item class="tc-white" routerLink="map">
-        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Map</a>
-      <a mat-list-item class="tc-white" routerLink="sensors">
-        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Sensors</a>
-      <a mat-list-item class="tc-white" routerLink="probes">
-        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Probes</a>
-      <mat-divider></mat-divider>
-
-      <h3 mat-subheader class="tc-white">
-        MONITOR
-      </h3>
-      <a mat-list-item class="tc-white" routerLink="overview">
-        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Overview</a>
-      <a mat-list-item class="tc-white" routerLink="dashboards">
-        <mat-icon class="tc-white" matListIcon>forum</mat-icon>Dashboards</a>
-      <mat-divider></mat-divider>
-
-      <a mat-list-item class="tc-white" routerLink="alert">
-        <mat-icon class="tc-white" matListIcon>warning</mat-icon> Alert
-      </a>
-      <mat-divider></mat-divider>
-
-      <a mat-list-item class="tc-white" routerLink="report">
-        <mat-icon class="tc-white" matListIcon>announcement</mat-icon> Report
-      </a>
-      <mat-divider></mat-divider>
-
-      <a mat-list-item class="tc-white" routerLink="log">
-        <mat-icon class="tc-white" matListIcon>history</mat-icon> Log
-      </a>
-      <mat-divider></mat-divider>
-
-      <a mat-list-item class="tc-white" routerLink="setting">
-        <mat-icon class="tc-white" matListIcon>settings</mat-icon> Setting
-      </a>
-      <mat-divider></mat-divider>
-
-    </mat-nav-list>
   </div>
-</mat-sidenav>
+  
+</perfect-scrollbar>

src/app/commons/layouts/sidebar/sidebar.component.scss

@@ -0,0 +1,4 @@
+@mixin sidemenu($theme) {
+    
+    
+}

src/app/commons/layouts/sidebar/sidebar.component.ts

@@ -8,6 +8,9 @@ import { menus } from './menu-element';
 })
 export class SidebarComponent implements OnInit {
 
+  @Input() iconOnly = false;
+  public menus = menus;
+
   constructor() { }
 
   ngOnInit() {

src/app/commons/ui/material/material.module.ts

@@ -6,7 +6,7 @@ import {
   MatSlideToggleModule, MatInputModule, MatCheckboxModule,
   MatToolbarModule, MatSnackBarModule, MatSidenavModule,
   MatTabsModule, MatSelectModule, MatRadioModule,
-  MatAutocompleteModule, MatFormFieldModule
+  MatAutocompleteModule, MatFormFieldModule, MatChipsModule
 } from '@angular/material';
 
 const MATERIAL_MODULES: any[] = [
@@ -15,7 +15,7 @@ const MATERIAL_MODULES: any[] = [
   MatSlideToggleModule, MatInputModule, MatCheckboxModule,
   MatToolbarModule, MatSnackBarModule, MatSidenavModule,
   MatTabsModule, MatSelectModule, MatRadioModule,
-  MatAutocompleteModule, MatFormFieldModule
+  MatAutocompleteModule, MatFormFieldModule, MatChipsModule
 ];
 
 @NgModule({

src/app/packages/notification/notification.component.html

@@ -0,0 +1,52 @@
+
+<div class="toolbar-notification-container">
+    <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
+        <mat-icon>notifications_none</mat-icon>
+        <span class="badge" *ngIf="notifications && notifications?.length !== 0">{{ notifications?.length }}</span>
+    </button>
+  
+    <div class="dropdown mat-elevation-z4" [class.open]="isOpen">
+  
+    <div class="card">
+          <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
+            <div class="title">
+                <div class="name">Notifications</div>
+                <div class="extra">
+  You have {{ notifications?.length }} new notifications</div>
+            </div>
+            <button type="button" mat-icon-button>
+                <mat-icon class="icon">settings</mat-icon>
+            </button>
+          </div>
+          <div *ngIf="notifications?.length !== 0; then thenBlock else elseBlock;"></div>
+          <div class="footer" fxLayout="row" fxLayoutAlign="center center">
+            <div class="action">Mark all as read</div>
+        </div>
+      </div>
+  
+    </div>
+  
+  </div>
+  
+  <ng-template #thenBlock>
+    <perfect-scrollbar class="content">
+      <div *ngFor="let notification of notifications; last as isLast">
+        <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple>
+          <mat-icon class="icon">notifications</mat-icon>
+          <div class="title" fxLayout="column">
+            <div class="name">{{ notification.title }}</div>
+            <div class="time">{{ notification.lastTime }}</div>
+          </div>
+          <span fxFlex></span>
+          <button type="button" mat-icon-button (click)="delete(notification)">
+            <mat-icon class="close">close</mat-icon>
+          </button>
+        </div>
+        <div class="divider" *ngIf="!isLast"></div>
+      </div>
+    </perfect-scrollbar>
+  </ng-template>
+  
+  <ng-template #elseBlock>
+    <div class="no" fxLayout="row" fxLayoutAlign="center center">????</div>
+  </ng-template>

src/app/packages/notification/notification.component.scss

@@ -0,0 +1,165 @@
+$prefix: 'notification';
+
+
+.badge {
+  	position: absolute;
+  	top: 0;
+  	left: 50%;
+  	font-weight: 700;
+  	line-height: 13px;
+  	height: 13px;
+  	padding: 5px;
+    border-radius: 26%;
+    width: 30%;
+    background-color: #f44336;
+  	color: #fff;
+  	border-color:#f44336
+}
+
+.#{$prefix} {
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &-btn {
+    display: flex;
+    justify-content: center;
+    margin-right: 10px;
+  }
+}
+.dropdown {
+	background: white;
+	position: absolute;
+	top: 42px;
+	right: 28px;
+	min-width: 350px;
+	z-index: 2;
+	transform: translateY(0) scale(0);
+	transform-origin: top right;
+	visibility: hidden;
+	transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
+
+	@media screen and (max-width: 599px) {
+	    min-width: 50vw;
+	    right: 5px;
+	    transform: translateY(0);
+    	visibility: hidden;
+    	transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
+	}
+
+	&.open {
+	    transform: translateY(0) scale(1);
+	    visibility: visible;
+	}
+	.card {
+
+	    .header {
+	      background: #EEEEEE;
+	      min-height: 54px;
+	      padding-left: 16px;
+	      padding-right: 8px;
+	      color: #555;
+	      display: flex;
+	      justify-content: flex-start;
+	      align-items: center;
+	      align-content: center;
+	      border-bottom: 1px solid #e0e0e0;
+
+	      .extra {
+	        font-size: 12px;
+	        color: #888;
+	      }
+    	}
+    }
+    .content {
+      	overflow: hidden;
+      	max-height: 256px;
+
+      	.notification {
+        	min-height: 64px;
+	        padding: 0 16px 0 14px;
+	        position: relative;
+	        color: #666;
+	        cursor: pointer;
+
+	        .icon {
+		        height: 28px;
+		        width: 28px;
+		        line-height: 28px;
+		        font-size: 18px;
+		        margin-right: 13px;
+		        text-align: center;
+		        border-radius: 50%;
+		        background: #FFF;
+		        color: #888;
+		        border: 1px solid #EEE;
+        	}
+
+        	.title {
+          		font-weight: 500;
+          		font-size: 14px;
+        	}
+
+        	.time {
+         		font-size: 12px;
+        	}
+
+        	.close {
+          		font-size: 18px;
+          		width: 18px;
+	          height: 18px;
+	          line-height: 18px;
+	        }
+
+	        &.primary {
+	          .icon {
+	            background: #ccc;
+	            color: #ddd;
+	          }
+	        }
+
+	        &.accent {
+	          .icon {
+	            background: #aaa;
+	            color: #bbb;
+	          }
+	        }
+
+	        &.warn {
+	          .icon {
+	            background: #eee;
+	            color: #ddd;
+	          }
+	        }
+
+	        &.read {
+	          color: #999;
+
+	          .name {
+	            font-weight: normal;
+	          }
+	        }
+      	}
+    }
+
+    .footer {
+      	min-height: 42px;
+      	border-top: 1px solid #EEE;
+
+	    .action {
+	        cursor: pointer;
+	        color: #AAA;
+	        text-align: center;
+	        font-size: 13px;
+	    }
+    }
+
+    .divider {
+      	width: calc(100% - 30px);
+      	height: 1px;
+      	background: #EEE;
+      	margin: 0 16px 0 14px;
+    }
+}

src/app/packages/notification/notification.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/packages/notification/notification.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss']
+})
+export class NotificationComponent implements OnInit {
+
+  cssPrefix = 'toolbar-notification';
+  isOpen = false;
+  @Input() notifications = [];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  select() {
+
+  }
+
+  delete(notification) {
+
+  }
+
+}

src/app/pages/pages.component.html

@@ -1,12 +1,37 @@
-<td-layout>
+<mat-sidenav-container class="container" fullscreen>
-    <td-layout-nav>
+
-        <of-header></of-header>
+    <mat-sidenav [mode]="sideNavMode" class="sidenav" #sidenav [opened]="sideNavOpened" style="overflow: hidden;">
-        <mat-sidenav-container fullscreen>
+        <mat-toolbar color="primary" class="mat-elevation-z4">
-            <of-sidebar></of-sidebar>
+            <img src="./assets/images/logo.codetok.png" width="36px">
-            <div tdMediaToggle="gt-xs" [mediaClasses]="['push-md']">
+            <h1 style="font-size: 26px;font-family: Roboto;color:white;margin-top: 8px">
-                <router-outlet></router-outlet>
+                overFlow
-            </div>
+                <span style="font-size: 12px;">.com</span>
-        </mat-sidenav-container>
+            </h1>
-    </td-layout-nav>
+        </mat-toolbar>
-    <of-footer></of-footer>
+
-</td-layout>
+        <of-sidebar></of-sidebar>
+
+    </mat-sidenav>
+
+    <mat-sidenav-content style="z-index: unset;overflow: hidden;">
+        <mat-drawer-container fullscreen>
+            <mat-drawer mode="side" #drawer class="drawer" [opened]="matDrawerOpened" style="overflow: hidden;">
+                <mat-toolbar color="primary" class="mat-elevation-z4">
+                    <img src="./assets/images/logo.codetok.png" width="36px">
+                </mat-toolbar>
+                <of-sidebar [iconOnly]="true"></of-sidebar>
+            </mat-drawer>
+            <mat-drawer-content style="overflow: hidden;">
+
+                <of-header [sidenav]="sidenav" [drawer]="drawer" [sidebar]="sidenav2" [matDrawerShow]="matDrawerShow" style="z-index: 500"></of-header>
+
+                <perfect-scrollbar style="height: calc(100% - 33px);">
+                    <div style="height: 100%;">
+                        <router-outlet #route="outlet"></router-outlet>
+                    </div>
+                </perfect-scrollbar>
+            </mat-drawer-content>
+        </mat-drawer-container>
+    </mat-sidenav-content>
+
+</mat-sidenav-container>

src/app/pages/pages.component.scss

@@ -0,0 +1,21 @@
+@mixin auth($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
+    
+    .sidenav,.drawer{
+        background: mat-color($primary,400);    
+        overflow: hidden;
+        position: relative;
+    }
+    [no-over-flow] {
+        overflow: hidden;
+    }
+    .router-outlet{
+        position: relative;padding: 0px 5px;
+    }
+    .spacer {
+        width: 100%;
+    }
+}

src/app/pages/pages.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
 
 @Component({
   selector: 'of-pages',
@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PagesComponent implements OnInit {
 
+  @Input() isVisible = true;
+  visibility = 'shown';
+
+  sideNavOpened = true;
+  matDrawerOpened = false;
+  matDrawerShow = true;
+  sideNavMode = 'side';
+
   constructor() { }
 
   ngOnInit() {
+
   }
 
+  getRouteAnimation(outlet) {
+    return outlet.activatedRouteData.animation;
+  }
 }

src/app/pages/pages.module.ts

@@ -7,19 +7,40 @@ import { CovalentModule } from 'app/commons/ui/covalent/covalent.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
 import { HeaderComponent } from 'app/commons/layouts/header/header.component';
 import { FooterComponent } from 'app/commons/layouts/footer/footer.component';
+import { MenuItemComponent } from 'app/commons/layouts/menu-item/menu-item.component';
+import {
+  PerfectScrollbarModule,
+  PERFECT_SCROLLBAR_CONFIG,
+  PerfectScrollbarConfigInterface
+} from 'ngx-perfect-scrollbar';
+import { NotificationComponent } from 'app/packages/notification/notification.component';
+
+const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
+  suppressScrollX: true
+};
+
 
 @NgModule({
   imports: [
     CommonModule,
     PagesRoutingModule,
     CovalentModule,
-    MaterialModule
+    MaterialModule,
+    PerfectScrollbarModule,
   ],
   declarations: [
     PagesComponent,
     SidebarComponent,
     HeaderComponent,
     FooterComponent,
+    MenuItemComponent,
+    NotificationComponent
+  ],
+  providers: [
+    {
+      provide: PERFECT_SCROLLBAR_CONFIG,
+      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
+    }
   ]
 })
 export class PagesModule { }

src/assets/images/typography.scss

@@ -0,0 +1,18 @@
+@import '~@angular/material/theming';
+
+$custom-typography: mat-typography-config(
+    $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+    $display-4:     mat-typography-level(112px, 112px, 300),
+    $display-3:     mat-typography-level(56px, 56px, 300),
+    $display-2:     mat-typography-level(45px, 48px, 300),
+    $display-1:     mat-typography-level(34px, 40px, 300),
+    $headline:      mat-typography-level(14px, 32px, 300),
+    $title:         mat-typography-level(20px, 32px, 300),
+    $subheading-2:  mat-typography-level(22px, 28px, 300),
+    $subheading-1:  mat-typography-level(15px, 24px, 300),
+    $body-2:        mat-typography-level(14px, 24px, 300),
+    $body-1:        mat-typography-level(14px, 20px, 300),
+    $caption:       mat-typography-level(12px, 20px, 300),
+    $button:        mat-typography-level(14px, 14px, 300),
+    $input:         mat-typography-level(16px, 1.125, 300)
+);

src/environments/environment.ts

@@ -6,3 +6,17 @@
 export const environment = {
   production: false
 };
+export const palete = {
+  primary: '#D32F2F',
+  accent: '#E65100',
+  warm: '#C2185B',
+  name: '#D50000',
+  secondary: '#D81B60',
+  tertiary: '#8E24AA',
+  quaternary: '#5E35B1',
+  quinary: '#3949AB',
+  secondaryLight: '#E91E63',
+  tertiaryLight: '#9C27B0',
+  quaternaryLight: '#673AB7',
+  quinaryLight: '#3F51B5'
+};

src/index.html

@@ -1,15 +1,32 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
-  <title>OverflowWebapp</title>
+  <title>overFlow</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+    crossorigin="" />
+  <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
 </head>
+
 <body>
   <of-root></of-root>
+
+  <div class="loader-container">
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+      crossorigin=""></script>
 </body>
+
 </html>

src/styles.scss

@@ -1,35 +1 @@
-// Adjust your logo position
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
-.mat-icon {
-    &.mat-icon-logo {
-      position: relative;
-      top: -4px;
-    }
-  }
-  
-  // Hack for small search box
-  .td-search-box {
-  .td-search-icon.mat-icon-button {
-    margin: 0;
-    height: 30px;
-    .mat-icon {
-      margin-top: -10px;
-    }
-  }
-  td-search-input {
-    margin-left: 0 !important;
-    margin-bottom: 5px;
-    .mat-form-field {
-      width: auto;
-    }
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
-    }
-    .mat-input-infix {
-      padding: 0;
-    }
-    .mat-form-field-infix {
-      border-top: 0;
-    }
-  }
-  }
-  

src/theme/theme.scss

@@ -0,0 +1,158 @@
+@import '~@angular/material/theming';
+@import '~app/pages/pages.component.scss';
+@import '~app/commons/layouts/sidebar/sidebar.component.scss';
+@import '~app/commons/layouts/menu-item/menu-item.component.scss';
+
+$mat-light-theme-background: (
+  status-bar: map_get($mat-grey, 300),
+  app-bar:    map_get($mat-grey, 100),
+  background: map_get($mat-indigo, 50),
+  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
+  card:       white,
+  dialog:     white,
+  disabled-button: $black-12-opacity,
+  raised-button: white,
+  focused-button: $black-6-opacity,
+  selected-button: map_get($mat-grey, 300),
+  selected-disabled-button: map_get($mat-grey, 400),
+  disabled-button-toggle: map_get($mat-grey, 200),
+  unselected-chip: map_get($mat-grey, 300),
+  disabled-list-option: map_get($mat-grey, 200),
+);
+
+@include mat-core();
+
+$primary : $mat-indigo;
+$accent  : $mat-orange;
+$warn    : $mat-red;
+
+
+
+$primary-app-primary: mat-palette($primary , 400);
+$primary-app-accent:  mat-palette($accent , 900);
+$primary-app-warn:    mat-palette($warn );
+$cdk-theme:   mat-light-theme($primary-app-primary, $primary-app-accent,$primary-app-warn);
+
+of-sidebar{
+    $sidebar-app-primary: mat-palette($primary , 400);
+    $sidebar-app-accent:  mat-palette($accent , 900);
+    $sidebar-app-warn:    mat-palette($warn );
+    $cdk-sidebar-theme:   mat-dark-theme($sidebar-app-primary, $sidebar-app-accent,$sidebar-app-warn);
+    @include mat-list-theme($cdk-sidebar-theme); 
+}
+   
+
+of-menu-item{
+    @include menu-item($cdk-theme,20px)
+}
+
+@include angular-material-theme($cdk-theme);
+@include auth($cdk-theme);
+
+html {
+  height:100%;
+}
+body{
+  padding: 0px !important;
+  margin: 0px !important;
+  height:100%;
+}
+.components-container-gt-xs {
+    padding: 20px;
+    // background-color: #fdfdfd;
+}
+.components-container-xs {
+    padding: 5px !important;
+    // background-color: #fdfdfd;
+}
+.component-preview {
+    padding: 20px;
+}
+.ps-content {
+  height: 100%;
+}
+
+.loader-container {
+    background-color: white;
+    width: 100vw;
+    height: 100vh;
+    z-index: 2000;
+    position: absolute;
+    
+    -moz-animation: cssAnimation 1s ease-in 3s forwards;
+    /* Firefox */
+    animation: cssAnimation 1s ease-in 3s forwards;
+    /* Safari and Chrome */
+    -o-animation: cssAnimation 1s ease-in 3s forwards;
+    /* Opera */
+    animation: cssAnimation 1s ease-in 3s forwards;
+    animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
+}
+
+@keyframes cssAnimation {
+    to {
+        opacity:0;
+        display: none;
+        visibility:hidden;
+    }
+}
+@keyframes cssAnimation {
+    to {
+        visibility:hidden;
+        opacity:0;
+        display: none;
+    }
+}
+
+
+
+.spinner {
+    margin: 50vh auto 0;
+    width: 70px;
+    text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  
+
+  border-radius: 100%;
+  display: inline-block;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.bounce3 {
+    background-color: orange;
+}
+
+.spinner .bounce1 {
+    background-color: blue;
+  animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+    background-color: red;
+  animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% { transform: scale(0) }
+  40% { transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% { 
+    transform: scale(0);
+    transform: scale(0);
+  } 40% { 
+    transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

src/theme/typography.scss

@@ -0,0 +1,18 @@
+@import '~@angular/material/theming';
+
+$custom-typography: mat-typography-config(
+    $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+    $display-4:     mat-typography-level(112px, 112px, 300),
+    $display-3:     mat-typography-level(56px, 56px, 300),
+    $display-2:     mat-typography-level(45px, 48px, 300),
+    $display-1:     mat-typography-level(34px, 40px, 300),
+    $headline:      mat-typography-level(14px, 32px, 300),
+    $title:         mat-typography-level(20px, 32px, 300),
+    $subheading-2:  mat-typography-level(22px, 28px, 300),
+    $subheading-1:  mat-typography-level(15px, 24px, 300),
+    $body-2:        mat-typography-level(14px, 24px, 300),
+    $body-1:        mat-typography-level(14px, 20px, 300),
+    $caption:       mat-typography-level(12px, 20px, 300),
+    $button:        mat-typography-level(14px, 14px, 300),
+    $input:         mat-typography-level(16px, 1.125, 300)
+);

yarn.lock

@@ -130,6 +130,12 @@
   dependencies:
     tslib "^1.7.1"
 
+"@angular/flex-layout@^2.0.0-beta.12":
+  version "2.0.0-beta.12"
+  resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-2.0.0-beta.12.tgz#80970dc1d60f27fa41537659926f3238f759f343"
+  dependencies:
+    tslib "^1.7.1"
+
 "@angular/forms@^5.2.1":
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-5.2.1.tgz#530f1249bc71d9560297be642d55a5a6c439d920"
@@ -4434,6 +4440,13 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+ngx-perfect-scrollbar@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc"
+  dependencies:
+    perfect-scrollbar "^1.3.0"
+    resize-observer-polyfill "^1.4.0"
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
@@ -4990,6 +5003,10 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+perfect-scrollbar@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
@@ -5855,6 +5872,10 @@ requires-port@1.0.x, requires-port@1.x.x, requires-port@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
 
+resize-observer-polyfill@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"