added left sidenav 3 & right sidenav 3

+ page layouts header size modifications
+ page layouts header text alignment

src/app/core/components/navigation/navigation.model.ts

@@ -327,6 +327,11 @@ export class FuseNavigation
                                 'type' : 'nav-item',
                                 'url'  : '/ui/page-layouts/simple/right-sidenav-2'
                             },
+                            {
+                                'title': 'Right Sidenav 3',
+                                'type' : 'nav-item',
+                                'url'  : '/ui/page-layouts/simple/right-sidenav-3'
+                            },
                             {
                                 'title': 'Tabbed',
                                 'type' : 'nav-item',

src/app/core/scss/partials/_helpers.scss

@@ -37,6 +37,26 @@
         .#{$abbrev}-#{$size} {
             #{$prop}: $length !important;
         }
+    }
+
+    @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
+
+        .#{$abbrev}x-#{$size} {
+            #{$prop}-right: $length !important;
+            #{$prop}-left: $length !important;
+        }
+
+        .#{$abbrev}y-#{$size} {
+            #{$prop}-top: $length !important;
+            #{$prop}-bottom: $length !important;
+        }
+    }
+
+    @for $index from 0 through 64 {
+        $size: $index * 4;
+        $length: #{$size}px;
 
         .#{$abbrev}t-#{$size} {
             #{$prop}-top: $length !important;
@@ -53,16 +73,6 @@
         .#{$abbrev}l-#{$size} {
             #{$prop}-left: $length !important;
         }
-
-        .#{$abbrev}x-#{$size} {
-            #{$prop}-right: $length !important;
-            #{$prop}-left: $length !important;
-        }
-
-        .#{$abbrev}y-#{$size} {
-            #{$prop}-top: $length !important;
-            #{$prop}-bottom: $length !important;
-        }
     }
 }
 

src/app/core/scss/partials/_page-layouts.scss

@@ -1,26 +1,21 @@
 // Page Layouts
-$header-height: 200px;
+$carded-header-height: 200px !default;
-$header-height-sm: 160px;
+$carded-header-height-sm: 160px !default;
+$carded-toolbar-height: 64px !default;
 
-$card-toolbar-height: 64px;
+$header-height: 120px !default;
-$card-header-height: $header-height - $card-toolbar-height;
+$header-height-sm: 100px !default;
-$card-header-height-sm: $header-height-sm - $card-toolbar-height;
+
+// Calculate toolbarless header height
+$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height;
+$carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-toolbar-height;
 
 .page-layout {
     position: relative;
     overflow: hidden;
 
-    // Top bg
-    .top-bg {
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        right: 0;
-        left: 0;
-        height: $header-height;
-    }
-
     // Carded layout
+
     &.carded {
         display: flex;
         flex-direction: row;
@@ -29,6 +24,20 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
         min-width: 100%;
         min-height: 100%;
 
+        // Top bg
+        .top-bg {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            left: 0;
+            height: $carded-header-height;
+
+            @include media-breakpoint('sm') {
+                height: $carded-header-height-sm;
+            }
+        }
+
         // Fullwidth
         &.fullwidth {
 
@@ -58,34 +67,40 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                 margin-right: 32px;
 
                 .header {
-                    height: $card-header-height;
+                    height: $carded-header-height-without-toolbar;
-                    min-height: $card-header-height;
+                    min-height: $carded-header-height-without-toolbar;
-                    max-height: $card-header-height;
+                    max-height: $carded-header-height-without-toolbar;
+
+                    @include media-breakpoint('sm') {
+                        height: $carded-header-height-without-toolbar-sm;
+                        min-height: $carded-header-height-without-toolbar-sm;
+                        max-height: $carded-header-height-without-toolbar-sm;
+                    }
                 }
 
                 .content-card {
                     display: flex;
                     flex-direction: column;
                     flex: 1;
-                    background: mat-color($background, background);
                     overflow: hidden;
+                    background: mat-color($background, background);
                     @include mat-elevation(7);
 
                     .toolbar {
                         display: flex;
                         justify-content: flex-start;
                         align-items: center;
-                        height: $card-toolbar-height;
-                        min-height: $card-toolbar-height;
-                        max-height: $card-toolbar-height;
                         border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                        height: $carded-toolbar-height;
+                        min-height: $carded-toolbar-height;
+                        max-height: $carded-toolbar-height;
                     }
 
                     .content {
                         display: flex;
                         flex: 1;
-                        background: mat-color($background, background);
                         overflow: auto;
+                        background: mat-color($background, background);
                     }
                 }
             }
@@ -130,9 +145,9 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                     }
 
                     .header {
-                        height: $header-height;
+                        height: $carded-header-height;
-                        min-height: $header-height;
+                        min-height: $carded-header-height;
-                        max-height: $header-height;
+                        max-height: $carded-header-height;
                     }
 
                     .content {
@@ -158,17 +173,17 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
 
                         .header {
                             display: flex;
-                            height: $card-header-height;
+                            height: $carded-header-height-without-toolbar;
-                            min-height: $card-header-height;
+                            min-height: $carded-header-height-without-toolbar;
-                            max-height: $card-header-height;
+                            max-height: $carded-header-height-without-toolbar;
                         }
 
                         .content-card {
                             display: flex;
                             flex-direction: column;
                             flex: 1;
-                            background: mat-color($background, background);
                             overflow: hidden;
+                            background: mat-color($background, background);
                             @include mat-elevation(7);
 
                             .toolbar {
@@ -176,10 +191,10 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                                 justify-content: flex-start;
                                 align-items: center;
                                 flex: 1;
-                                height: $card-toolbar-height;
-                                min-height: $card-toolbar-height;
-                                max-height: $card-toolbar-height;
                                 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+                                height: $carded-toolbar-height;
+                                min-height: $carded-toolbar-height;
+                                max-height: $carded-toolbar-height;
 
                                 .sidenav-toggle {
                                     margin: 0 8px 0 0 !important;
@@ -249,6 +264,16 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
     // Simple layout
     &.simple {
 
+        // Top bg
+        .top-bg {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            right: 0;
+            left: 0;
+            height: $header-height;
+        }
+
         // Fullwidth
         &.fullwidth,
         &.inner-sidenav {
@@ -279,6 +304,33 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                 }
             }
 
+            // Inner Sidenav
+            &.inner-sidenav {
+
+                > md-sidenav-container {
+
+                    .sidenav {
+
+                        &.md-is-locked-open {
+                            height: auto;
+                        }
+                    }
+
+                    .mat-sidenav-content {
+                        display: flex;
+                        height: auto;
+
+                        .center {
+                            @include mat-elevation(0);
+
+                            .content {
+                                @include mat-elevation(4);
+                            }
+                        }
+                    }
+                }
+            }
+
             > md-sidenav-container {
                 display: flex;
                 background: none;
@@ -309,6 +361,7 @@ $card-header-height-sm: $header-height-sm - $card-toolbar-height;
                 }
 
                 .mat-sidenav-content {
+                    display: flex;
                     flex: 1;
                     overflow: visible;
 

src/app/main/ui/page-layouts/carded/fullwidth-2/fullwidth-2.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header md-accent-bg p-24">
+        <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Fullwidth with page scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/fullwidth/fullwidth.component.html

@@ -8,7 +8,7 @@
     <div class="center">
 
         <!-- CONTENT HEADER -->
-        <div class="header md-accent-bg p-24">
+        <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
             <h2>Fullwidth with content scroll</h2>
         </div>
         <!-- / CONTENT HEADER -->

src/app/main/ui/page-layouts/carded/left-sidenav/left-sidenav.component.html

@@ -18,7 +18,9 @@
 
             <!-- SIDENAV CONTENT -->
             <div class="content p-24" perfect-scrollbar>
+
                 <fuse-demo-sidenav></fuse-demo-sidenav>
+
             </div>
             <!-- / SIDENAV CONTENT -->
 

src/app/main/ui/page-layouts/page-layouts.module.ts

@@ -11,11 +11,12 @@ import { CardedRightSidenav2Component } from './carded/right-sidenav-2/right-sid
 import { SimpleFullWidthComponent } from './simple/fullwidth/fullwidth.component';
 import { SimpleLeftSidenavComponent } from './simple/left-sidenav/left-sidenav.component';
 import { SimpleLeftSidenav2Component } from './simple/left-sidenav-2/left-sidenav-2.component';
+import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
 import { SimpleRightSidenavComponent } from './simple/right-sidenav/right-sidenav.component';
 import { SimpleRightSidenav2Component } from './simple/right-sidenav-2/right-sidenav-2.component';
+import { SimpleRightSidenav3Component } from './simple/right-sidenav-3/right-sidenav-3.component';
 import { TabbedComponent } from './simple/tabbed/tabbed.component';
 import { BlankComponent } from './blank/blank.component';
-import { SimpleLeftSidenav3Component } from './simple/left-sidenav-3/left-sidenav-3.component';
 
 const routes: Routes = [
     {
@@ -66,10 +67,10 @@ const routes: Routes = [
         path     : 'ui/page-layouts/simple/right-sidenav-2',
         component: SimpleRightSidenav2Component
     },
-    /*{
+    {
         path     : 'ui/page-layouts/simple/right-sidenav-3',
         component: SimpleRightSidenav3Component
-    },*/
+    },
     {
         path     : 'ui/page-layouts/simple/tabbed',
         component: TabbedComponent
@@ -99,6 +100,7 @@ const routes: Routes = [
         SimpleLeftSidenav3Component,
         SimpleRightSidenavComponent,
         SimpleRightSidenav2Component,
+        SimpleRightSidenav3Component,
         TabbedComponent,
         BlankComponent
     ]

src/app/main/ui/page-layouts/simple/fullwidth/fullwidth.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout simple fullwidth">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24">
+    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
         <h2>Fullwidth</h2>
     </div>
     <!-- / HEADER -->

src/app/main/ui/page-layouts/simple/left-sidenav-2/left-sidenav-2.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav-2"

src/app/main/ui/page-layouts/simple/left-sidenav-3/left-sidenav-3.component.html

@@ -1,7 +1,7 @@
 <div class="page-layout simple left-sidenav inner-sidenav" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header md-accent-bg p-24" fxLayout="row">
+    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
         <button md-button class="mat-icon-button sidenav-toggle"
                 fuseMdSidenavToggler="simple-left-sidenav"
@@ -19,7 +19,7 @@
     <md-sidenav-container>
 
         <!-- SIDENAV -->
-        <md-sidenav class="sidenav mat-sidenav-opened p-24" align="start" opened="true" mode="side"
+        <md-sidenav class="sidenav mat-sidenav-opened" align="start" opened="true" mode="side"
                     fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
 
             <fuse-demo-sidenav></fuse-demo-sidenav>
@@ -28,7 +28,7 @@
         <!-- / SIDENAV -->
 
         <!-- CENTER -->
-        <div class="center">
+        <div class="center p-24">
 
             <!-- CONTENT -->
             <div class="content p-24" perfect-scrollbar>

src/app/main/ui/page-layouts/simple/left-sidenav/left-sidenav.component.html

@@ -15,7 +15,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-left-sidenav"

src/app/main/ui/page-layouts/simple/right-sidenav-2/right-sidenav-2.component.html

@@ -6,7 +6,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav-2"

src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.html

@@ -0,0 +1,46 @@
+<div class="page-layout simple right-sidenav inner-sidenav" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
+
+        <button md-button class="mat-icon-button sidenav-toggle"
+                fuseMdSidenavToggler="simple-left-sidenav"
+                fxHide.gt-md>
+            <md-icon>menu</md-icon>
+        </button>
+
+        <div>
+            <h2>Right inner sidenav with content scroll</h2>
+        </div>
+
+    </div>
+    <!-- / HEADER -->
+
+    <md-sidenav-container>
+
+        <!-- CENTER -->
+        <div class="center p-24">
+
+            <!-- CONTENT -->
+            <div class="content p-24" perfect-scrollbar>
+
+                <fuse-demo-content></fuse-demo-content>
+
+            </div>
+            <!-- / CONTENT -->
+
+        </div>
+        <!-- / CENTER -->
+
+        <!-- SIDENAV -->
+        <md-sidenav class="sidenav mat-sidenav-opened" align="end" opened="true" mode="side"
+                    fuseMdSidenavHelper="simple-left-sidenav" md-is-locked-open="gt-md">
+
+            <fuse-demo-sidenav></fuse-demo-sidenav>
+
+        </md-sidenav>
+        <!-- / SIDENAV -->
+
+    </md-sidenav-container>
+
+</div>

src/app/main/ui/page-layouts/simple/right-sidenav-3/right-sidenav-3.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-simple-right-sidenav-3',
+    templateUrl: './right-sidenav-3.component.html',
+    styleUrls  : ['./right-sidenav-3.component.scss']
+})
+export class SimpleRightSidenav3Component
+{
+    constructor()
+    {
+    }
+
+}

src/app/main/ui/page-layouts/simple/right-sidenav/right-sidenav.component.html

@@ -6,7 +6,7 @@
         <div class="center" fxFlex perfect-scrollbar>
 
             <!-- HEADER -->
-            <div class="header md-accent-bg p-24" fxLayout="row">
+            <div class="header md-accent-bg p-24" fxLayout="row" fxLayoutAlign="start center">
 
                 <button md-button class="mat-icon-button sidenav-toggle"
                         fuseMdSidenavToggler="simple-right-sidenav"