Updated changelog and nav badge

(Chat Panel) Style and logic tweaks
(Navbar) Fixed: IE11 issues
2025-12-22 10:17:07 +00:00 · 2018-07-12 17:49:16 +03:00 · 2018-07-12 17:45:46 +03:00 · 2018-07-12 16:04:56 +03:00 · 2018-07-12 15:48:55 +03:00 · 2018-07-12 13:59:51 +03:00
266 changed files with 6612 additions and 2546 deletions
--- a/angular.json
+++ b/angular.json
@@ -49,6 +49,18 @@
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true
+                        },
+                        "ec": {
+                            "sourceMap": true,
+                            "extractCss": true
+                        },
+                        "hmr": {
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.hmr.ts"
+                                }
+                            ]
                        }
                    }
                },
@@ -63,12 +75,10 @@
                        },
                        "hmr": {
                            "hmr": true,
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.hmr.ts"
-                                }
-                            ]
+                            "browserTarget": "fuse:build:hmr"
+                        },
+                        "ec": {
+                            "browserTarget": "fuse:build:ec"
                        }
                    }
                },
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "fuse",
-  "version": "6.1.0",
+  "version": "6.2.3",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -91,9 +91,9 @@
      },
      "dependencies": {
        "typescript": {
-          "version": "2.9.1",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
-          "integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
+          "version": "2.9.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+          "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
          "dev": true
        }
      }
@@ -121,17 +121,17 @@
      }
    },
    "@angular/animations": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.5.tgz",
-      "integrity": "sha512-zW/qX3CvsuRDOcTNFFSf7uXktvq1jRrfKR8LdGQ/DER1GU3o8pR3z3H8gHy8lAFc3PESfETtzXinKUNzvTDfpA==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.7.tgz",
+      "integrity": "sha512-yOig45sxzpEmlXy+eFgh2v2yxoE/Hh9rn7BX82uj71yobSpCYoe58AEOay1cu0FCcLi/P5qltHepDrRRxNxPMw==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/cdk": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.1.tgz",
-      "integrity": "sha512-uwW4eIGJKqOkR+ew6YcEAh1J4SP98jdyDpsZ4IEMkV9+jXcKfcwcxGFpZvs9wJsAvAr8EgNmZ8h+iuZLwJsvmA==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.3.tgz",
+      "integrity": "sha512-cfUwvnGGByZy/poA75/vsELBq68eDUYJe3qi0WvSbtFzbQlsxeqaBiaxVYqmHJkPlSF5nsUhg5KvDowED3a4sA==",
      "requires": {
        "tslib": "^1.7.1"
      }
@@ -174,25 +174,25 @@
      }
    },
    "@angular/common": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.5.tgz",
-      "integrity": "sha512-xL4Aq+uGQcmHYs90WSKsS9vBC1XO042hM5lSVz+zyYtYzYHdt/Qg1CIuR3zkP+8DG+mf1QZqbg5YtQx5XykmgA==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.7.tgz",
+      "integrity": "sha512-MUCCs3FLwqyp5wuvkUTHVGMTd3bNGDxD5IJNvaLgVliGe4r0IlETRXYqyRPs7gdVFPbiJ97P1DUONArj9xL9XA==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/compiler": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.5.tgz",
-      "integrity": "sha512-Oe0VRCyKfHLatalRuXjCdgaY6hhiMXEL/ueknMJFC0+xA73mEchmLYXj64/1ed753cjnLOM2qbVVwqhc26tmEg==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.7.tgz",
+      "integrity": "sha512-J9I2U4NiWIBXl0ZOJkBW5G7xXhphggSirTwFLD4yKCTeJXgyldZytJZRkDUx1uouZtI2/PycvaOZoRr85N67AA==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/compiler-cli": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.5.tgz",
-      "integrity": "sha512-onRlVLWo1mTdyxLMRtW4iPntTUglJl9T0hacRlscKKlAUT8jaSfqIyknCF3jEXJrTnfKdypen053U7g2ajifrA==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.7.tgz",
+      "integrity": "sha512-nDIo4TtE3oXgZiQ5vJEcr5fi3FuXRDJQSOeOQinpCrtEt3s4pU5WAX5DLFGPSD2C/EXRDvHZgF9OTJeu5U4ErQ==",
      "dev": true,
      "requires": {
        "chokidar": "^1.4.2",
@@ -335,9 +335,9 @@
      }
    },
    "@angular/core": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.5.tgz",
-      "integrity": "sha512-yG4Qz5wHWgFYOCtX62F8MmJ1wZwZA1ALbyQC+WAZfi7Y8Asx8TShJ+3QKUDYwO1jj530pqNbfauDTCmPzzPvaQ==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.7.tgz",
+      "integrity": "sha512-aZ0NvbYsMGqg0zUu7+9vuDxnGzwe++RsBBhlwHZHz1ZZwJmU6VJhUhaI+MuKC7rHyFFr9vUxvJ7ilhGaK2+J7A==",
      "requires": {
        "tslib": "^1.9.0"
      }
@@ -351,63 +351,72 @@
      }
    },
    "@angular/forms": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.5.tgz",
-      "integrity": "sha512-d1SdhAQ/W1n3vtm1lp5y16EaUylcZ2wftLUj6MSne3bH/2MJ6JsxJKwX+MfPcQCo+DCfG5bF0UMCa1KAwUQthQ==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.7.tgz",
+      "integrity": "sha512-bFRdWxLmTiG7z0yZaq22oBHTgVSpJwUJEbZ5ieu21JqTgIDYne+YR/xCJrPj+P2S5NDlEK84g/4y4GoNt/thhQ==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/http": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.5.tgz",
-      "integrity": "sha512-N9lx1s1h4wki1ob4qne3FdyAWG3TcCAGnUAjDmZ1+c/hhxtcv0iEJ22nBrGkPIsUxIPXg0JgsD1hKhu5DGEbWg==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.7.tgz",
+      "integrity": "sha512-zk/kjsfEXjEQIRpmsjuJO5wgFNxj7JGY6Bq0nianZuyCuj/mlm0zflww2NLX4O22IMnvVSun2Kx+kDY44n4hfw==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/language-service": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.5.tgz",
-      "integrity": "sha512-PH06chMTcWTLfVxZqpXksIx9969N/azEghYx0U+MzlGomeaaBXr7RuZWHRVn/lD5XljrqdWAQSMc+abbn1oKgg==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.7.tgz",
+      "integrity": "sha512-R96kTy9Hpy5QPHirJz+5JjnzjJZdwbGwZ6rpq79Fe15RYaYfMjFTAAhmmOgWrnTFBug0QWBWyKV7950JcJIr3Q==",
      "dev": true
    },
    "@angular/material": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.1.tgz",
-      "integrity": "sha512-SBoUXxHknkgwzp5pNDHW0jyrTM0d0Tk4lVyDbtEX8VEPtXqG5nL3BSgyjpJbTvqlmy2kOooUu3qgAmt87VH9lw==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.3.tgz",
+      "integrity": "sha512-3qTZ8+pjc8P1D+TLr9ETGfFyMYO+BAQlFiVs3oV8rw5y0Wzkz6G1JHfKQ2oOd8/npXP6rJQldssUM4IBbSOxIQ==",
      "requires": {
+        "parse5": "^5.0.0",
        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.0.0.tgz",
+          "integrity": "sha512-0ywuiUOnpWWeil5grH2rxjyTJoeQVwyBuO2si6QIU9dWtj2npjuyK1HaY1RbLnVfDhEbhyAPNUBKRK0Xj2xE0w==",
+          "optional": true
+        }
      }
    },
    "@angular/material-moment-adapter": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.2.1.tgz",
-      "integrity": "sha512-mZA/gUDI/B6lnKBx0Qov3920MdNhOvVk0oQq/wrxgt2I25AVbpKZO2d8PSCBATQzWjqUwN3GKtcQFx0bPtvNCQ==",
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.3.tgz",
+      "integrity": "sha512-YFi1iED8gcHhCwkWGMkyJtHX/tWAsQWnRNrh1AwbWl4JW1739vPAM/OimdIijeGAZ5dVVZX4A4EscCBb74b4dA==",
      "requires": {
        "tslib": "^1.7.1"
      }
    },
    "@angular/platform-browser": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.5.tgz",
-      "integrity": "sha512-FSsA9C3cJa7S4SPUAhypKlTQf4uA4hiqx/h65v7frDiyRVHv22oWKX7aKmyyb9oP5FHN/TDeQiRn4m8XNqG6AQ==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.7.tgz",
+      "integrity": "sha512-CASH1CDr2DD+aBrWN9qpDDFTI3H6p/oqH23h28bEV+LZl7F57r4sj8KXKgaE+mcrOFRQqXTAlPoq3hRCLmhtVA==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/platform-browser-dynamic": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.5.tgz",
-      "integrity": "sha512-TTSLOMVrgRXI29xmBWsnSp8187vbWnbj0YEehuyup2FmltUl+H5Vms7poWV9/6fI3RnW3Yg9Ziv3T5iKqsiADQ==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.7.tgz",
+      "integrity": "sha512-8G45A9w8UJvX3vPEHqeJHt/sd0zu6w1M+rsnOCo78r35SjsLbrmDNhc4VkLZFJ+iNjgPWtNtdpeXQqtTHE46yw==",
      "requires": {
        "tslib": "^1.9.0"
      }
    },
    "@angular/router": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.5.tgz",
-      "integrity": "sha512-M3cb5CDX+WvkM2xmFeP64zPwLJ6by6cyzl5OCfEQjoTGKOFY7N2B4kHAOw5KJN3nIEd0PersSBgf11Y9g7GPwA==",
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.7.tgz",
+      "integrity": "sha512-KuQBeIgfiwV3bLafepMhYVJQIAF8cTckCudFh5Z0OqckJgGsWSgtvEdtBctPi+lzt7OQBi7Ym2rOv3X0dOvu0Q==",
      "requires": {
        "tslib": "^1.9.0"
      }
@@ -537,9 +546,9 @@
      }
    },
    "@types/lodash": {
-      "version": "4.14.109",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
-      "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==",
+      "version": "4.14.110",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.110.tgz",
+      "integrity": "sha512-iXYLa6olt4tnsCA+ZXeP6eEW3tk1SulWeYyP/yooWfAtXjozqXgtX4+XUtMuOCfYjKGz3F34++qUc3Q+TJuIIw==",
      "dev": true
    },
    "@types/node": {
@@ -795,9 +804,9 @@
      }
    },
    "acorn": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
-      "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==",
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.1.tgz",
+      "integrity": "sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==",
      "dev": true
    },
    "acorn-dynamic-import": {
@@ -890,9 +899,9 @@
      }
    },
    "angular-draggable-droppable": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.0.tgz",
-      "integrity": "sha512-plPrP1voXfV0w13LSvKadMIl4UMsP+eVAqZM73VowB/c6YZyIRb50+MXML2UOX2Or1dFGBIJA4pWpcT623Xktw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.1.tgz",
+      "integrity": "sha512-+GYYq4U5rPcoNwaCdoY3sNBBKd80JT7+R8n4QINJKvtToisyGpsXmX68SkKfHsNtXyTzoxX/h/37XJgE0y8KLw==",
      "requires": {
        "tslib": "^1.9.0"
      }
@@ -903,9 +912,9 @@
      "integrity": "sha512-+i2bH9T/S4gTQdJLt264H4JMKXNpik33pMatSOvPSqFQ0vImnTBVbvijfmy75OgwKPJ8OZw0R76CrLjp2EYX2A=="
    },
    "angular-resizable-element": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.0.0.tgz",
-      "integrity": "sha512-5fpklah0P48S0W89k839WwB7sj7Slik39+EcfKlAgrXgXuwEwPjeXX6mduDYtFDFNkVb081SjEfPbNW/nborJA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.1.0.tgz",
+      "integrity": "sha512-moVRSGnCgwCKofswHlNGSQWMz9OCC2JRxz4duJ6wC3g3WBMen2NpFSnoueEIMWoo/DJZjCuF3k/kFoTC4Ett3A==",
      "requires": {
        "tslib": "^1.9.0"
      }
@@ -932,13 +941,19 @@
      },
      "dependencies": {
        "color-convert": {
-          "version": "1.9.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
-          "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
+          "version": "1.9.2",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
+          "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==",
          "dev": true,
          "requires": {
-            "color-name": "^1.1.1"
+            "color-name": "1.1.1"
          }
+        },
+        "color-name": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz",
+          "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=",
+          "dev": true
        }
      }
    },
@@ -1176,13 +1191,13 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "8.6.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.2.tgz",
-      "integrity": "sha512-cv9v1mYYBcAnZq4MHseJ9AIdjQmNahnpCpPO46oTkQJS2GggsBp2azHjNpAuQ95Epvsg+AIsyjYhfI9YwFxGSA==",
+      "version": "8.6.3",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.3.tgz",
+      "integrity": "sha512-KkQyCHBxma7R2eoEkjja/RHUBw+Fc1nY46LdV62fzJI5D7i8mLLCtAZ/AVR3UbXhDZ8mUz4C/PF4lZrbiHa1ZQ==",
      "dev": true,
      "requires": {
        "browserslist": "^3.2.8",
-        "caniuse-lite": "^1.0.30000851",
+        "caniuse-lite": "^1.0.30000856",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^6.0.22",
@@ -1553,12 +1568,12 @@
      "dev": true
    },
    "boom": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
      "dev": true,
      "requires": {
-        "hoek": "4.x.x"
+        "hoek": "2.x.x"
      }
    },
    "brace-expansion": {
@@ -1698,9 +1713,9 @@
      }
    },
    "buffer-from": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
-      "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
+      "integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ==",
      "dev": true
    },
    "buffer-indexof": {
@@ -1836,9 +1851,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30000851",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000851.tgz",
-      "integrity": "sha512-Y1ecA1cL9wg0vni8t33nBw/poX8ypm+2c3fbwAESj8cm4ufK9CBFQ1+nUK8Dp5dtFo5Fc3JzkI5DKmQbuIo6hQ==",
+      "version": "1.0.30000856",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000856.tgz",
+      "integrity": "sha512-x3mYcApHMQemyaHuH/RyqtKCGIYTgEA63fdi+VBvDz8xUSmRiVWTLeyKcoGQCGG6UPR9/+4qG4OKrTa6aSQRKg==",
      "dev": true
    },
    "caseless": {
@@ -1913,29 +1928,30 @@
      }
    },
    "check-types": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz",
-      "integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0=",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
+      "integrity": "sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==",
      "dev": true
    },
    "chokidar": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz",
-      "integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
+      "integrity": "sha512-z9n7yt9rOvIJrMhvDtDictKrkFHeihkNl6uWMmZlmL6tJtX9Cs+87oK+teBx+JIgzvbX3yZHT3eF8vpbDxHJXQ==",
      "dev": true,
      "requires": {
        "anymatch": "^2.0.0",
        "async-each": "^1.0.0",
        "braces": "^2.3.0",
-        "fsevents": "^1.1.2",
+        "fsevents": "^1.2.2",
        "glob-parent": "^3.1.0",
        "inherits": "^2.0.1",
        "is-binary-path": "^1.0.0",
        "is-glob": "^4.0.0",
+        "lodash.debounce": "^4.0.8",
        "normalize-path": "^2.1.1",
        "path-is-absolute": "^1.0.0",
        "readdirp": "^2.0.0",
-        "upath": "^1.0.0"
+        "upath": "^1.0.5"
      }
    },
    "chownr": {
@@ -2444,23 +2460,12 @@
      }
    },
    "cryptiles": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
-      "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
      "dev": true,
      "requires": {
-        "boom": "5.x.x"
-      },
-      "dependencies": {
-        "boom": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
-          "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
-          "dev": true,
-          "requires": {
-            "hoek": "4.x.x"
-          }
-        }
+        "boom": "2.x.x"
      }
    },
    "crypto-browserify": {
@@ -2568,9 +2573,9 @@
      }
    },
    "d3": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-5.4.0.tgz",
-      "integrity": "sha1-CQGZqFadHeI9BKP/B/4TYJX+p04=",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.5.0.tgz",
+      "integrity": "sha512-HRDSYvT3n7kMvJH7Avp7iR0Xsz97bkCFka9aOg04EdyXyiAP8yQzUpLH3712y9R7ffVo1g94t1OYFHBB0yI9vQ==",
      "requires": {
        "d3-array": "1",
        "d3-axis": "1",
@@ -2606,9 +2611,9 @@
      },
      "dependencies": {
        "d3-scale": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
-          "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.0.tgz",
+          "integrity": "sha512-Bb2N3ZgzPdKVEoWGkt8lPV6R7YdpSBWI70Xf26NQHOVjs77a6gLUmBOOPt9d9nB8JiQhwXY1RHCa+eSyWCJZIQ==",
          "requires": {
            "d3-array": "^1.2.0",
            "d3-collection": "1",
@@ -2718,9 +2723,9 @@
      }
    },
    "d3-format": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
-      "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz",
+      "integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg=="
    },
    "d3-geo": {
      "version": "1.10.0",
@@ -3416,9 +3421,9 @@
      }
    },
    "error-ex": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
-      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
      "dev": true,
      "requires": {
        "is-arrayish": "^0.2.1"
@@ -4082,9 +4087,9 @@
      }
    },
    "follow-redirects": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
-      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
+      "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
      "dev": true,
      "requires": {
        "debug": "^3.1.0"
@@ -4198,14 +4203,14 @@
      "dev": true
    },
    "fsevents": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.3.tgz",
-      "integrity": "sha512-X+57O5YkDTiEQGiw8i7wYc2nQgweIekqkepI8Q3y4wVlurgBt2SuwxTeYUYMZIGpLZH3r/TsMjczCMXE5ZOt7Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
+      "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
      "dev": true,
      "optional": true,
      "requires": {
        "nan": "^2.9.2",
-        "node-pre-gyp": "^0.9.0"
+        "node-pre-gyp": "^0.10.0"
      },
      "dependencies": {
        "abbrev": {
@@ -4286,7 +4291,7 @@
          }
        },
        "deep-extend": {
-          "version": "0.4.2",
+          "version": "0.5.1",
          "bundled": true,
          "dev": true,
          "optional": true
@@ -4464,7 +4469,7 @@
          }
        },
        "node-pre-gyp": {
-          "version": "0.9.1",
+          "version": "0.10.0",
          "bundled": true,
          "dev": true,
          "optional": true,
@@ -4573,12 +4578,12 @@
          "optional": true
        },
        "rc": {
-          "version": "1.2.6",
+          "version": "1.2.7",
          "bundled": true,
          "dev": true,
          "optional": true,
          "requires": {
-            "deep-extend": "~0.4.0",
+            "deep-extend": "^0.5.1",
            "ini": "~1.3.0",
            "minimist": "^1.2.0",
            "strip-json-comments": "~2.0.1"
@@ -5135,9 +5140,9 @@
      }
    },
    "hash.js": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
-      "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.4.tgz",
+      "integrity": "sha512-A6RlQvvZEtFS5fLU43IDu0QUmBy+fDO9VMdTXvufKwIkt/rFfvICAViCax5fbDO4zdNzaC3/27ZhKUok5bAJyw==",
      "dev": true,
      "requires": {
        "inherits": "^2.0.3",
@@ -5145,15 +5150,15 @@
      }
    },
    "hawk": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
-      "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
      "dev": true,
      "requires": {
-        "boom": "4.x.x",
-        "cryptiles": "3.x.x",
-        "hoek": "4.x.x",
-        "sntp": "2.x.x"
+        "boom": "2.x.x",
+        "cryptiles": "2.x.x",
+        "hoek": "2.x.x",
+        "sntp": "1.x.x"
      }
    },
    "he": {
@@ -5174,9 +5179,9 @@
      }
    },
    "hoek": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
-      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
      "dev": true
    },
    "hosted-git-info": {
@@ -5479,9 +5484,9 @@
      "dev": true
    },
    "install": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/install/-/install-0.11.0.tgz",
-      "integrity": "sha512-30UqvWKr/59SStU2/bRye4wT1S3mzjwa0oV+BxusB0neGqhxUrwLlnXDbt6QtIfBxCNWFqg+ARnGNjFj8XuV5A=="
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.11.2.tgz",
+      "integrity": "sha512-vm3WeuqkmCK/jD56s7pWLKl4QoHMdcIwLlsMAFYV3XAbrz+RdyOJvtIQn/A1LiaNz2djUdwec01/90KLSIaUGg=="
    },
    "internal-ip": {
      "version": "1.2.0",
@@ -6135,9 +6140,9 @@
      "dev": true
    },
    "js-yaml": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
-      "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
+      "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==",
      "dev": true,
      "requires": {
        "argparse": "^1.0.7",
@@ -6660,6 +6665,12 @@
      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
      "dev": true
    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
+      "dev": true
+    },
    "lodash.mergewith": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
@@ -7166,9 +7177,9 @@
      }
    },
    "ngx-color-picker": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.3.tgz",
-      "integrity": "sha512-0uoxt+3BtanTTbQj9elpsZe/6a/BWAl8jdl0m6OyrCXlCiO3q4zGZjWee4905RF0NXGxQvDWT27coqmDeXGsvw=="
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.4.0.tgz",
+      "integrity": "sha512-u4UeeSdZoaGmHJCSlFQGe0xhOLB63rms35IjI7HhHz9MS4VeCQa4UiFMK9Dgjg1FuGt2nEyj/4Fs6tpQfgXEXQ=="
    },
    "ngx-cookie-service": {
      "version": "1.0.10",
@@ -7236,25 +7247,6 @@
          "dev": true,
          "optional": true
        },
-        "boom": {
-          "version": "2.10.1",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-          "dev": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
-        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x"
-          }
-        },
        "form-data": {
          "version": "2.1.4",
          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
@@ -7285,25 +7277,6 @@
            "har-schema": "^1.0.5"
          }
        },
-        "hawk": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x",
-            "cryptiles": "2.x.x",
-            "hoek": "2.x.x",
-            "sntp": "1.x.x"
-          }
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-          "dev": true
-        },
        "http-signature": {
          "version": "1.1.1",
          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
@@ -7367,16 +7340,6 @@
          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
          "dev": true,
          "optional": true
-        },
-        "sntp": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
        }
      }
    },
@@ -7467,15 +7430,6 @@
          "dev": true,
          "optional": true
        },
-        "boom": {
-          "version": "2.10.1",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-          "dev": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
-        },
        "caseless": {
          "version": "0.11.0",
          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
@@ -7496,16 +7450,6 @@
            "supports-color": "^2.0.0"
          }
        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x"
-          }
-        },
        "form-data": {
          "version": "2.1.4",
          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
@@ -7531,25 +7475,6 @@
            "pinkie-promise": "^2.0.0"
          }
        },
-        "hawk": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x",
-            "cryptiles": "2.x.x",
-            "hoek": "2.x.x",
-            "sntp": "1.x.x"
-          }
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-          "dev": true
-        },
        "http-signature": {
          "version": "1.1.1",
          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
@@ -7598,16 +7523,6 @@
            "uuid": "^3.0.0"
          }
        },
-        "sntp": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
-        },
        "supports-color": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -11946,9 +11861,9 @@
      }
    },
    "object-keys": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
-      "integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
+      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
      "dev": true
    },
    "object-visit": {
@@ -12561,9 +12476,9 @@
      }
    },
    "prismjs": {
-      "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
-      "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
+      "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
      "requires": {
        "clipboard": "^2.0.0"
      }
@@ -12620,9 +12535,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "6.0.110",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.110.tgz",
-          "integrity": "sha512-LiaH3mF+OAqR+9Wo1OTJDbZDtCewAVjTbMhF1ZgUJ3fc8xqOJq6VqbpBh9dJVCVzByGmYIg2fREbuXNX0TKiJA==",
+          "version": "6.0.113",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.113.tgz",
+          "integrity": "sha512-f9XXUWFqryzjkZA1EqFvJHSFyqyasV17fq8zCDIzbRV4ctL7RrJGKvG+lcex86Rjbzd1GrER9h9VmF5sSjV0BQ==",
          "dev": true
        },
        "adm-zip": {
@@ -13041,9 +12956,9 @@
      "dev": true
    },
    "regenerate": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
-      "integrity": "sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
      "dev": true
    },
    "regenerator-runtime": {
@@ -13160,9 +13075,9 @@
      }
    },
    "request": {
-      "version": "2.85.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
-      "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
+      "version": "2.87.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
+      "integrity": "sha512-fcogkm7Az5bsS6Sl0sibkbhcKsnyon/jV1kF3ajGmF0c8HrttdKTPRT9hieOaQHA5HEq6r8OyWOo/o781C1tNw==",
      "dev": true,
      "requires": {
        "aws-sign2": "~0.7.0",
@@ -13173,7 +13088,6 @@
        "forever-agent": "~0.6.1",
        "form-data": "~2.3.1",
        "har-validator": "~5.0.3",
-        "hawk": "~6.0.2",
        "http-signature": "~1.2.0",
        "is-typedarray": "~1.0.0",
        "isstream": "~0.1.2",
@@ -13183,7 +13097,6 @@
        "performance-now": "^2.1.0",
        "qs": "~6.5.1",
        "safe-buffer": "^5.1.1",
-        "stringstream": "~0.0.5",
        "tough-cookie": "~2.3.3",
        "tunnel-agent": "^0.6.0",
        "uuid": "^3.1.0"
@@ -13214,9 +13127,9 @@
      "dev": true
    },
    "resolve": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
-      "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
+      "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==",
      "dev": true,
      "requires": {
        "path-parse": "^1.0.5"
@@ -13811,12 +13724,12 @@
      }
    },
    "sntp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
-      "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
      "dev": true,
      "requires": {
-        "hoek": "4.x.x"
+        "hoek": "2.x.x"
      }
    },
    "socket.io": {
@@ -14022,9 +13935,9 @@
      }
    },
    "source-map-support": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.5.tgz",
-      "integrity": "sha512-mR7/Nd5l1z6g99010shcXJiNEaf3fEtmLhRB/sBcQVJGodcHCULPp2y4Sfa43Kv2zq7T+Izmfp/WHCR6dYkQCA==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz",
+      "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==",
      "dev": true,
      "requires": {
        "buffer-from": "^1.0.0",
@@ -14122,9 +14035,9 @@
      "dev": true
    },
    "sshpk": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",
-      "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
+      "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=",
      "dev": true,
      "requires": {
        "asn1": "~0.2.3",
@@ -14134,6 +14047,7 @@
        "ecc-jsbn": "~0.1.1",
        "getpass": "^0.1.1",
        "jsbn": "~0.1.0",
+        "safer-buffer": "^2.0.2",
        "tweetnacl": "~0.14.0"
      }
    },
@@ -14252,9 +14166,9 @@
      }
    },
    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
+      "integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==",
      "dev": true
    },
    "strip-ansi": {
@@ -14629,9 +14543,9 @@
      }
    },
    "tslib": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
-      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
+      "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
    },
    "tslint": {
      "version": "5.9.1",
@@ -14667,9 +14581,9 @@
      }
    },
    "tsutils": {
-      "version": "2.26.2",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.2.tgz",
-      "integrity": "sha512-uzwnhmrSbyinPCiwfzGsOY3IulBTwoky7r83HmZdz9QNCjhSCzavkh47KLWuU0zF2F2WbpmmzoJUIEiYyd+jEQ==",
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.1.tgz",
+      "integrity": "sha512-AE/7uzp32MmaHvNNFES85hhUDHFdFZp6OAiZcd6y4ZKKIg6orJTm8keYWBhIhrJQH3a4LzNKat7ZPXZt5aTf6w==",
      "dev": true,
      "requires": {
        "tslib": "^1.8.1"
@@ -15472,9 +15386,9 @@
      }
    },
    "webpack-merge": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.2.tgz",
-      "integrity": "sha512-/0QYwW/H1N/CdXYA2PNPVbsxO3u2Fpz34vs72xm03SRfg6bMNGfMJIQEpQjKRvkG2JvT6oRJFpDtSrwbX8Jzvw==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.3.tgz",
+      "integrity": "sha512-zxwAIGK7nKdu5CIZL0BjTQoq3elV0t0MfB7rUC1zj668geid52abs6hN/ACwZdK6LeMS8dC9B6WmtF978zH5mg==",
      "dev": true,
      "requires": {
        "lodash": "^4.17.5"
@@ -15530,9 +15444,9 @@
      "dev": true
    },
    "which": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
      "dev": true,
      "requires": {
        "isexe": "^2.0.0"
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
  "name": "fuse",
-  "version": "6.1.0",
+  "version": "6.2.3",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
-    "start-hmr": "ng serve --configuration hmr -sm=false",
-    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
+    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
+    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
@@ -19,19 +19,19 @@
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.3",
-    "@angular/animations": "6.0.5",
-    "@angular/cdk": "6.2.1",
-    "@angular/common": "6.0.5",
-    "@angular/compiler": "6.0.5",
-    "@angular/core": "6.0.5",
+    "@angular/animations": "6.0.7",
+    "@angular/cdk": "6.3.3",
+    "@angular/common": "6.0.7",
+    "@angular/compiler": "6.0.7",
+    "@angular/core": "6.0.7",
    "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.5",
-    "@angular/http": "6.0.5",
-    "@angular/material": "6.2.1",
-    "@angular/material-moment-adapter": "6.2.1",
-    "@angular/platform-browser": "6.0.5",
-    "@angular/platform-browser-dynamic": "6.0.5",
-    "@angular/router": "6.0.5",
+    "@angular/forms": "6.0.7",
+    "@angular/http": "6.0.7",
+    "@angular/material": "6.3.3",
+    "@angular/material-moment-adapter": "6.3.3",
+    "@angular/platform-browser": "6.0.7",
+    "@angular/platform-browser-dynamic": "6.0.7",
+    "@angular/router": "6.0.7",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
@@ -46,16 +46,16 @@
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
-    "d3": "5.4.0",
+    "d3": "5.5.0",
    "hammerjs": "2.0.8",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
-    "ngx-color-picker": "6.3.3",
+    "ngx-color-picker": "6.4.0",
    "ngx-cookie-service": "1.0.10",
    "perfect-scrollbar": "1.4.0",
-    "prismjs": "1.14.0",
+    "prismjs": "1.15.0",
    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",
    "web-animations-js": "2.3.1",
@@ -63,13 +63,13 @@
  },
  "devDependencies": {
    "@angular/cli": "6.0.8",
-    "@angular/compiler-cli": "6.0.5",
-    "@angular/language-service": "6.0.5",
+    "@angular/compiler-cli": "6.0.7",
+    "@angular/language-service": "6.0.7",
    "@angular-devkit/build-angular": "0.6.8",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
-    "@types/lodash": "4.14.109",
+    "@types/lodash": "4.14.110",
    "@types/node": "8.9.5",
    "codelyzer": "4.2.1",
    "jasmine-core": "2.99.1",
--- a/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
@@ -1,29 +1,45 @@
 <ng-container *ngIf="!item.hidden">

    <!-- normal collapse -->
-    <a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.function"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>

    <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       [routerLink]="[item.url]" routerLinkActive="active"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
    <ng-template #itemContent>
        <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
        <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
--- a/src/@fuse/components/navigation/horizontal/item/item.component.html
+++ b/src/@fuse/components/navigation/horizontal/item/item.component.html
@@ -1,20 +1,38 @@
 <ng-container *ngIf="!item.hidden">

    <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.function -->
-    <span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
+          (click)="item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>

    <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
-       [routerLink]="[item.url]" routerLinkActive="active"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
+       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
+       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
+       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
+        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
+    </a>
+
+    <!-- item.externalUrl && item.function -->
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
+       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

@@ -27,4 +45,4 @@
        </span>
    </ng-template>

-</ng-container>
+</ng-container>
--- a/src/@fuse/components/navigation/navigation.component.html
+++ b/src/@fuse/components/navigation/navigation.component.html
@@ -1,5 +1,4 @@
-<div id="main-navigation" class="nav"
-     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
+<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">

    <!-- Vertical Navigation Layout -->
    <ng-container *ngIf="layout === 'vertical'">
@@ -21,7 +20,8 @@
        <ng-container *ngFor="let item of navigation">

            <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
-            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapsable>
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'"
+                                             [item]="item"></fuse-nav-horizontal-collapsable>
            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>

        </ng-container>
--- a/src/@fuse/components/navigation/navigation.component.scss
+++ b/src/@fuse/components/navigation/navigation.component.scss
@@ -4,7 +4,7 @@ fuse-navigation {
    display: flex;
    flex: 1 0 auto;

-    #main-navigation {
+    > .nav {
        margin: 0;
        padding: 0;
        width: 100%;
--- a/src/@fuse/components/navigation/navigation.service.ts
+++ b/src/@fuse/components/navigation/navigation.service.ts
@@ -1,11 +1,13 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';

-@Injectable()
+import { FuseNavigationItem } from '@fuse/types';
+
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseNavigationService
 {
-    flatNavigation: any[] = [];
-
    onItemCollapsed: Subject<any>;
    onItemCollapseToggled: Subject<any>;

@@ -138,39 +140,30 @@ export class FuseNavigationService
     * Get flattened navigation array
     *
     * @param navigation
+     * @param flatNavigation
     * @returns {any[]}
     */
-    getFlatNavigation(navigation): any
+    getFlatNavigation(navigation, flatNavigation: FuseNavigationItem[] = []): any
    {
-        for ( const navItem of navigation )
+        for ( const item of navigation )
        {
-            if ( navItem.type === 'item' )
+            if ( item.type === 'item' )
            {
-                this.flatNavigation.push({
-                    id        : navItem.id || null,
-                    title     : navItem.title || null,
-                    translate : navItem.translate || null,
-                    type      : navItem.type,
-                    icon      : navItem.icon || null,
-                    url       : navItem.url || null,
-                    function  : navItem.function || null,
-                    exactMatch: navItem.exactMatch || false,
-                    badge     : navItem.badge || null
-                });
+                flatNavigation.push(item);

                continue;
            }

-            if ( navItem.type === 'collapse' || navItem.type === 'group' )
+            if ( item.type === 'collapsable' || item.type === 'group' )
            {
-                if ( navItem.children )
+                if ( item.children )
                {
-                    this.getFlatNavigation(navItem.children);
+                    this.getFlatNavigation(item.children, flatNavigation);
                }
            }
        }

-        return this.flatNavigation;
+        return flatNavigation;
    }

    /**
--- a/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
+++ b/src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
@@ -1,12 +1,14 @@
 <ng-container *ngIf="!item.hidden">

    <!-- normal collapse -->
-    <a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
+       (click)="toggleOpen($event)" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
+       (click)="toggleOpen($event)"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@@ -14,19 +16,20 @@
    </a>

    <!-- item.externalUrl -->
-    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
+       (click)="toggleOpen($event)"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function"
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
          (click)="toggleOpen($event);item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>

    <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
       (click)="toggleOpen($event);item.function()"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
@@ -34,7 +37,7 @@
    </a>

    <!-- item.externalUrl && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
       (click)="toggleOpen($event);item.function()"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
--- a/src/@fuse/components/navigation/vertical/group/group.component.html
+++ b/src/@fuse/components/navigation/vertical/group/group.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="!item.hidden">

-    <div class="group-title">
+    <div class="group-title" [ngClass]="item.classes">
        <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
    </div>

--- a/src/@fuse/components/navigation/vertical/item/item.component.html
+++ b/src/@fuse/components/navigation/vertical/item/item.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="!item.hidden">

    <!-- item.url -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@@ -9,19 +9,20 @@
    </a>

    <!-- item.externalUrl -->
-    <a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>

    <!-- item.function -->
-    <span class="nav-link" *ngIf="!item.url && item.function"
+    <span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
          (click)="item.function()" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </span>

    <!-- item.url && item.function -->
-    <a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
+       (click)="item.function()"
       [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
       [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
       [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@@ -29,7 +30,8 @@
    </a>

    <!-- item.externalUrl && item.function -->
-    <a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
+       (click)="item.function()"
       [href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
        <ng-container *ngTemplateOutlet="itemContent"></ng-container>
    </a>
--- a/src/@fuse/components/search-bar/search-bar.component.scss
+++ b/src/@fuse/components/search-bar/search-bar.component.scss
@@ -9,7 +9,7 @@
        height: 64px;
        font-size: 13px;

-        @include media-breakpoint-down('sm') {
+        @include media-breakpoint-down('xs') {
            height: 56px;
        }

@@ -28,7 +28,7 @@
                height: 64px !important;
                line-height: 64px !important;

-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint-down('xs') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
@@ -39,7 +39,7 @@
                height: 64px !important;
                line-height: 64px !important;

-                @include media-breakpoint-down('sm') {
+                @include media-breakpoint-down('xs') {
                    height: 56px !important;
                    line-height: 56px !important;
                }
--- a/src/@fuse/components/sidebar/sidebar.component.scss
+++ b/src/@fuse/components/sidebar/sidebar.component.scss
@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 fuse-sidebar {
    display: flex;
    flex-direction: column;
@@ -14,6 +16,12 @@ fuse-sidebar {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
    background: white;

+    @include media-breakpoint-down('xs') {
+        min-width: 0 !important;
+        max-width: 80vw !important;
+        width: 80vw !important;
+    }
+
    &.left-positioned {
        left: 0;
        transform: translateX(-100%);
@@ -37,12 +45,6 @@ fuse-sidebar {
        position: absolute !important;
        top: 0;
        bottom: 0;
-
-        &:not(.unfolded) {
-            width: 64px;
-            min-width: 64px;
-            max-width: 64px;
-        }
    }

    &.animations-enabled {
--- a/src/@fuse/components/sidebar/sidebar.component.ts
+++ b/src/@fuse/components/sidebar/sidebar.component.ts
@@ -1,12 +1,12 @@
-import { ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Input, OnDestroy, OnInit, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { ObservableMedia } from '@angular/flex-layout';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';

 import { FuseSidebarService } from './sidebar.service';
 import { FuseMatchMediaService } from '@fuse/services/match-media.service';
 import { FuseConfigService } from '@fuse/services/config.service';
-import { takeUntil } from 'rxjs/internal/operators';

@Component({
    selector     : 'fuse-sidebar',
@@ -20,6 +20,10 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @Input()
    name: string;

+    // Key
+    @Input()
+    key: string;
+
    // Position
    @Input()
    position: 'left' | 'right';
@@ -36,6 +40,14 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostBinding('class.locked-open')
    isLockedOpen: boolean;

+    // Folded width
+    @Input()
+    foldedWidth: number;
+
+    // Folded auto trigger on hover
+    @Input()
+    foldedAutoTriggerOnHover: boolean;
+
    // Folded unfolded
    @HostBinding('class.unfolded')
    unfolded: boolean;
@@ -44,10 +56,19 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @Input()
    invisibleOverlay: boolean;

+    // Folded changed
+    @Output()
+    foldedChanged: EventEmitter<boolean>;
+
+    // Opened changed
+    @Output()
+    openedChanged: EventEmitter<boolean>;
+
    // Private
    private _folded: boolean;
    private _fuseConfig: any;
    private _wasActive: boolean;
+    private _wasFolded: boolean;
    private _backdrop: HTMLElement | null = null;
    private _player: AnimationPlayer;
    private _unsubscribeAll: Subject<any>;
@@ -79,13 +100,17 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    )
    {
        // Set the defaults
-        this.folded = false;
+        this.foldedAutoTriggerOnHover = true;
+        this.foldedWidth = 64;
+        this.foldedChanged = new EventEmitter();
+        this.openedChanged = new EventEmitter();
        this.opened = false;
        this.position = 'left';
        this.invisibleOverlay = false;

        // Set the private defaults
        this._animationsEnabled = false;
+        this._folded = false;
        this._unsubscribeAll = new Subject();
    }

@@ -93,37 +118,40 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    // @ Accessors
    // -----------------------------------------------------------------------------------------------------

-    // Folded
-    @HostBinding('class.folded')
+    /**
+     * Folded
+     *
+     * @param {boolean} value
+     */
    @Input()
    set folded(value: boolean)
    {
-        // Only work if the sidebar is not closed
+        // Set the folded
+        this._folded = value;
+
+        // Return if the sidebar is closed
        if ( !this.opened )
        {
            return;
        }

-        // Set the folded
-        this._folded = value;
-
-        // Programmatically add/remove margin to the element
+        // Programmatically add/remove padding to the element
        // that comes after or before based on the position
        let sibling,
            styleRule;

-        const styleValue = '64px';
+        const styleValue = this.foldedWidth + 'px';

        // Get the sibling and set the style rule
        if ( this.position === 'left' )
        {
            sibling = this._elementRef.nativeElement.nextElementSibling;
-            styleRule = 'margin-left';
+            styleRule = 'padding-left';
        }
        else
        {
            sibling = this._elementRef.nativeElement.previousElementSibling;
-            styleRule = 'margin-right';
+            styleRule = 'padding-right';
        }

        // If there is no sibling, return...
@@ -135,15 +163,36 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // If folded...
        if ( value )
        {
-            // Set the style
+            // Fold the sidebar
+            this.fold();
+
+            // Set the folded width
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+            // Set the style and class
            this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+            this._renderer.addClass(this._elementRef.nativeElement, 'folded');
        }
        // If unfolded...
        else
        {
-            // Remove the style
+            // Unfold the sidebar
+            this.unfold();
+
+            // Remove the folded width
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+            this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+            // Remove the style and class
            this._renderer.removeStyle(sibling, styleRule);
+            this._renderer.removeClass(this._elementRef.nativeElement, 'folded');
        }
+
+        // Emit the 'foldedChanged' event
+        this.foldedChanged.emit(this.folded);
    }

    get folded(): boolean
@@ -178,6 +227,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy

        // Setup lockedOpen
        this._setupLockedOpen();
+
+        // Setup folded
+        this._setupFolded();
    }

    /**
@@ -253,6 +305,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Set the wasActive for the first time
        this._wasActive = false;

+        // Set the wasFolded
+        this._wasFolded = this.folded;
+
        // Show the sidebar
        this._showSidebar();

@@ -282,11 +337,20 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                    // Force the the opened status to true
                    this.opened = true;

-                    // Read the folded setting from the config
-                    // and fold the sidebar if it's true
-                    if ( this._fuseConfig.layout.navbar.folded )
+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
+                    // If the sidebar was folded, forcefully fold it again
+                    if ( this._wasFolded )
                    {
-                        this.fold();
+                        // Enable the animations
+                        this._enableAnimations();
+
+                        // Fold
+                        this.folded = true;
+
+                        // Mark for check
+                        this._changeDetectorRef.markForCheck();
                    }

                    // Hide the backdrop if any exists
@@ -304,6 +368,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
                    // Force the the opened status to close
                    this.opened = false;

+                    // Emit the 'openedChanged' event
+                    this.openedChanged.emit(this.opened);
+
                    // Hide the sidebar
                    this._hideSidebar();
                }
@@ -313,6 +380,63 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            });
    }

+    /**
+     * Setup the initial folded status
+     *
+     * @private
+     */
+    private _setupFolded(): void
+    {
+        // Return, if sidebar is not folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Return if the sidebar is closed
+        if ( !this.opened )
+        {
+            return;
+        }
+
+        // Programmatically add/remove padding to the element
+        // that comes after or before based on the position
+        let sibling,
+            styleRule;
+
+        const styleValue = this.foldedWidth + 'px';
+
+        // Get the sibling and set the style rule
+        if ( this.position === 'left' )
+        {
+            sibling = this._elementRef.nativeElement.nextElementSibling;
+            styleRule = 'padding-left';
+        }
+        else
+        {
+            sibling = this._elementRef.nativeElement.previousElementSibling;
+            styleRule = 'padding-right';
+        }
+
+        // If there is no sibling, return...
+        if ( !sibling )
+        {
+            return;
+        }
+
+        // Fold the sidebar
+        this.fold();
+
+        // Set the folded width
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Set the style and class
+        this._renderer.setStyle(sibling, styleRule, styleValue, RendererStyleFlags2.Important + RendererStyleFlags2.DashCase);
+        this._renderer.addClass(this._elementRef.nativeElement, 'folded');
+    }
+
    /**
     * Show the backdrop
     *
@@ -481,6 +605,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Set the opened status
        this.opened = true;

+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
        // Mark for check
        this._changeDetectorRef.markForCheck();
    }
@@ -504,6 +631,9 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
        // Set the opened status
        this.opened = false;

+        // Emit the 'openedChanged' event
+        this.openedChanged.emit(this.opened);
+
        // Hide the sidebar
        this._hideSidebar();

@@ -532,20 +662,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostListener('mouseenter')
    onMouseEnter(): void
    {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
        {
            return;
        }

-        // Enable the animations
-        this._enableAnimations();
-
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+        this.unfoldTemporarily();
    }

    /**
@@ -554,20 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
    @HostListener('mouseleave')
    onMouseLeave(): void
    {
-        // Only work if the sidebar is folded
-        if ( !this.folded )
+        // Only work if the auto trigger is enabled
+        if ( !this.foldedAutoTriggerOnHover )
        {
            return;
        }

-        // Enable the animations
-        this._enableAnimations();
-
-        // Fold the sidebar back
-        this.unfolded = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
+        this.foldTemporarily();
    }

    /**
@@ -626,4 +742,58 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
            this.fold();
        }
    }
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Fold the sidebar back
+        this.unfolded = false;
+
+        // Set the folded width
+        const styleValue = this.foldedWidth + 'px';
+
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'min-width', styleValue);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'max-width', styleValue);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldTemporarily(): void
+    {
+        // Only work if the sidebar is folded
+        if ( !this.folded )
+        {
+            return;
+        }
+
+        // Enable the animations
+        this._enableAnimations();
+
+        // Unfold the sidebar temporarily
+        this.unfolded = true;
+
+        // Remove the folded width
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'min-width');
+        this._renderer.removeStyle(this._elementRef.nativeElement, 'max-width');
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
 }
--- a/src/@fuse/components/sidebar/sidebar.service.ts
+++ b/src/@fuse/components/sidebar/sidebar.service.ts
@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';

 import { FuseSidebarComponent } from './sidebar.component';

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseSidebarService
 {
    // Private
--- a/src/@fuse/components/theme-options/theme-options.component.html
+++ b/src/@fuse/components/theme-options/theme-options.component.html
@@ -73,6 +73,17 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- TOOLBAR -->
@@ -91,6 +102,11 @@
                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- FOOTER -->
@@ -109,6 +125,28 @@
                            <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
                    </div>

                </ng-container>
@@ -146,6 +184,17 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- TOOLBAR -->
@@ -164,6 +213,11 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- FOOTER -->
@@ -182,6 +236,28 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
                    </div>

                </ng-container>
@@ -219,6 +295,17 @@
                            <mat-radio-button class="mb-16" value="right">Right</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-8">Variant:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- TOOLBAR -->
@@ -236,6 +323,11 @@
                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- FOOTER -->
@@ -253,6 +345,28 @@
                            <mat-radio-button class="mb-12" value="above-fixed">Above Fixed</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
                    </div>

                </ng-container>
@@ -285,6 +399,17 @@
                            <mat-radio-button class="mb-16" value="top">Top</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-8">Variant (Vertical):</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="variant">
+                            <mat-radio-button class="mb-16" value="vertical-style-1">Style 1</mat-radio-button>
+                            <mat-radio-button class="mb-16" value="vertical-style-2">Style 2</mat-radio-button>
+                        </mat-radio-group>
+
+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.navbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- TOOLBAR -->
@@ -302,6 +427,11 @@
                            <mat-radio-button class="mb-12" value="below">Below</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.toolbar.background">
+                        </fuse-material-color-picker>
+
                    </div>

                    <!-- FOOTER -->
@@ -319,6 +449,28 @@
                            <mat-radio-button class="mb-12" value="above-static">Above Static</mat-radio-button>
                        </mat-radio-group>

+                        <h3 class="mt-24 mb-8">Color:</h3>
+                        <fuse-material-color-picker class="mb-16"
+                                                    [(selectedClass)]="fuseConfig.layout.footer.background">
+                        </fuse-material-color-picker>
+
+                    </div>
+
+                    <!-- SIDE PANEL -->
+                    <div class="group" formGroupName="sidepanel">
+
+                        <h2>Side Panel</h2>
+
+                        <mat-slide-toggle formControlName="hidden">
+                            Hide
+                        </mat-slide-toggle>
+
+                        <h3 class="mt-24">Position:</h3>
+                        <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
+                            <mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
+                            <mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
+                        </mat-radio-group>
+
                    </div>

                </ng-container>
@@ -338,35 +490,6 @@

        </div>

-        <!-- COLORS -->
-        <div class="group">
-
-            <h2>Colors</h2>
-
-            <div class="colors">
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Toolbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.toolbar.background"></fuse-material-color-picker>
-                </div>
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Navbar Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.navbar.background"></fuse-material-color-picker>
-                </div>
-
-                <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
-                    <h4 class="mr-8">Footer Color</h4>
-                    <fuse-material-color-picker
-                        [(selectedClass)]="fuseConfig.layout.footer.background"></fuse-material-color-picker>
-                </div>
-
-            </div>
-
-        </div>
-
    </form>

 </div>
--- a/src/@fuse/components/theme-options/theme-options.component.scss
+++ b/src/@fuse/components/theme-options/theme-options.component.scss
@@ -73,11 +73,6 @@
                    }
                }
            }
-
-            .colors {
-                display: block !important;
-                width: 100%;
-            }
        }
    }
 }
--- a/src/@fuse/components/theme-options/theme-options.component.ts
+++ b/src/@fuse/components/theme-options/theme-options.component.ts
@@ -62,23 +62,28 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
        // noinspection TypeScriptValidateTypes
        this.form = this._formBuilder.group({
            layout          : this._formBuilder.group({
-                style  : new FormControl(),
-                width  : new FormControl(),
-                navbar : this._formBuilder.group({
-                    hidden    : new FormControl(),
-                    position  : new FormControl(),
+                style    : new FormControl(),
+                width    : new FormControl(),
+                navbar   : this._formBuilder.group({
+                    background: new FormControl(),
                    folded    : new FormControl(),
-                    background: new FormControl()
-                }),
-                toolbar: this._formBuilder.group({
                    hidden    : new FormControl(),
                    position  : new FormControl(),
-                    background: new FormControl()
+                    variant   : new FormControl()
                }),
-                footer : this._formBuilder.group({
+                toolbar  : this._formBuilder.group({
+                    background: new FormControl(),
                    hidden    : new FormControl(),
-                    position  : new FormControl(),
-                    background: new FormControl()
+                    position  : new FormControl()
+                }),
+                footer   : this._formBuilder.group({
+                    background: new FormControl(),
+                    hidden    : new FormControl(),
+                    position  : new FormControl()
+                }),
+                sidepanel: this._formBuilder.group({
+                    hidden: new FormControl(),
+                    position  : new FormControl()
                })
            }),
            customScrollbars: new FormControl()
@@ -174,20 +179,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                            hidden    : false,
                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                            variant   : 'vertical-style-1'
                        },
                        toolbar: {
+                            background: 'mat-white-500-bg',
                            hidden    : false,
-                            position  : 'below-static',
-                            background: 'mat-white-500-bg'
+                            position  : 'below-static'
                        },
                        footer : {
+                            background: 'mat-fuse-dark-900-bg',
                            hidden    : false,
-                            position  : 'below-static',
-                            background: 'mat-fuse-dark-900-bg'
+                            position  : 'below-static'
                        }
                    }
                });
@@ -202,20 +208,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                            hidden    : false,
                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                            variant   : 'vertical-style-1'
                        },
                        toolbar: {
+                            background: 'mat-white-500-bg',
                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-white-500-bg'
+                            position  : 'below'
                        },
                        footer : {
+                            background: 'mat-fuse-dark-900-bg',
                            hidden    : false,
-                            position  : 'below',
-                            background: 'mat-fuse-dark-900-bg'
+                            position  : 'below'
                        }
                    }
                });
@@ -230,20 +237,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                            hidden    : false,
                            position  : 'left',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                            layout    : 'vertical-style-1'
                        },
                        toolbar: {
+                            background: 'mat-white-500-bg',
                            hidden    : false,
-                            position  : 'above-static',
-                            background: 'mat-white-500-bg'
+                            position  : 'above-static'
                        },
                        footer : {
+                            background: 'mat-fuse-dark-900-bg',
                            hidden    : false,
-                            position  : 'above-static',
-                            background: 'mat-fuse-dark-900-bg'
+                            position  : 'above-static'
                        }
                    }
                });
@@ -258,20 +266,21 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
                    layout: {
                        width  : 'fullwidth',
                        navbar : {
+                            background: 'mat-fuse-dark-700-bg',
+                            folded    : false,
                            hidden    : false,
                            position  : 'top',
-                            folded    : false,
-                            background: 'mat-fuse-dark-700-bg'
+                            variant   : 'vertical-style-1'
                        },
                        toolbar: {
+                            background: 'mat-white-500-bg',
                            hidden    : false,
-                            position  : 'above',
-                            background: 'mat-white-500-bg'
+                            position  : 'above'
                        },
                        footer : {
+                            background: 'mat-fuse-dark-900-bg',
                            hidden    : false,
-                            position  : 'above-fixed',
-                            background: 'mat-fuse-dark-900-bg'
+                            position  : 'above-fixed'
                        }
                    }
                });
--- a/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
+++ b/src/@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service.ts
@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
 import { MatSidenav } from '@angular/material';

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseMatSidenavHelperService
 {
    sidenavInstances: MatSidenav[];
--- a/src/@fuse/fuse.module.ts
+++ b/src/@fuse/fuse.module.ts
@@ -1,27 +1,8 @@
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';

-import { FUSE_CONFIG, FuseConfigService } from '@fuse/services/config.service';
-import { FuseCopierService } from '@fuse/services/copier.service';
-import { FuseMatchMediaService } from '@fuse/services/match-media.service';
-import { FuseMatSidenavHelperService } from '@fuse/directives/fuse-mat-sidenav/fuse-mat-sidenav.service';
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
-import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
-import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
+import { FUSE_CONFIG } from '@fuse/services/config.service';

-@NgModule({
-    entryComponents: [],
-    providers      : [
-        FuseConfigService,
-        FuseCopierService,
-        FuseMatchMediaService,
-        FuseMatSidenavHelperService,
-        FuseNavigationService,
-        FuseSidebarService,
-        FuseSplashScreenService,
-        FuseTranslationLoaderService
-    ]
-})
+@NgModule()
 export class FuseModule
 {
    constructor(@Optional() @SkipSelf() parentModule: FuseModule)
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -14,7 +14,7 @@ i {
 }

 // Material colors map
-$matColorsMap: (
+$matPalettes: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
@@ -43,75 +43,91 @@ $matColorsMap: (
 );

 // Material color hues list
-$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;

 // Text color levels generator mixin
-@mixin generateTextColorLevels($baseTextColor) {
+@mixin generateTextColorLevels($classes, $contrast) {

-    // If the base text color is black...
-    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+    // If the contrast is dark...
+    @if ($contrast == 'dark') {

-        i,
-        .icon {
-            color: rgba(0, 0, 0, 0.54);
-        }
+        // Put down the color classes
+        #{$classes} {

-        &.secondary-text,
-        .secondary-text {
-            color: rgba(0, 0, 0, 0.54) !important;
-        }
+            i,
+            .icon {
+                color: rgba(0, 0, 0, 0.54);
+            }

-        &.hint-text,
-        .hint-text,
-        &.disabled-text,
-        .disabled-text {
-            color: rgba(0, 0, 0, 0.38) !important;
-        }
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(0, 0, 0, 0.54) !important;
+            }

-        &.divider,
-        .divider {
-            color: rgba(0, 0, 0, 0.12) !important;
-        }
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }

-        .mat-ripple-element {
-            background: rgba(0, 0, 0, 0.1);
+            &.divider,
+            .divider {
+                color: rgba(0, 0, 0, 0.12) !important;
+            }
+
+            .mat-ripple-element {
+                background: rgba(0, 0, 0, 0.1);
+            }
+
+            .adaptive-border-color {
+                border-color: rgba(0, 0, 0, 0.12);
+            }
        }

    }
        // If the base text color is white...
    @else {

-        i,
-        .icon {
-            color: rgba(255, 255, 255, 1);
-        }
+        // Put down the color classes
+        #{$classes} {

-        &.secondary-text,
-        .secondary-text {
-            color: rgba(255, 255, 255, 0.70) !important;
-        }
+            i,
+            .icon {
+                color: rgba(255, 255, 255, 1);
+            }

-        &.hint-text,
-        .hint-text,
-        &.disabled-text,
-        .disabled-text {
-            color: rgba(255, 255, 255, 0.50) !important;
-        }
+            &.secondary-text,
+            .secondary-text {
+                color: rgba(255, 255, 255, 0.70) !important;
+            }

-        &.divider,
-        .divider {
-            color: rgba(255, 255, 255, 0.12) !important;
-        }
+            &.hint-text,
+            .hint-text,
+            &.disabled-text,
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.50) !important;
+            }

-        .mat-ripple-element {
-            background: rgba(255, 255, 255, 0.1);
+            &.divider,
+            .divider {
+                color: rgba(255, 255, 255, 0.12) !important;
+            }
+
+            .mat-ripple-element {
+                background: rgba(255, 255, 255, 0.1);
+            }
+
+            .adaptive-border-color {
+                border-color: rgba(255, 255, 255, 0.12);
+            }
        }
    }
 }

-@mixin generateMaterialElementColors($contrastColor) {
+@mixin generateMaterialElementColors($classes, $contrast) {

-    // If the contrast color is white...
+    // If the contrast color is light...
    $fuseForeground: (
        base: white,
        text: white,
@@ -119,8 +135,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        divider: rgba(white, 0.12),
    );

-    // If the contrast color is black...
-    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+    // If the contrast color is dark...
+    @if ($contrast == 'dark') {

        $fuseForeground: (
            base: black,
@@ -129,43 +145,47 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        );
    }

-    // Native Input
-    input[type="text"] {
-        color: map_get($fuseForeground, base);
-    }
+    // Put down the color classes
+    #{$classes} {

-    // Input
-    .mat-form-field-label {
-        color: map_get($fuseForeground, hint-text);
-    }
+        // Native Input
+        input[type="text"] {
+            color: map_get($fuseForeground, base);
+        }

-    .mat-form-field-underline {
-        background-color: map_get($fuseForeground, divider);
-    }
+        // Input
+        .mat-form-field-label {
+            color: map_get($fuseForeground, hint-text);
+        }

-    // Select
-    .mat-select-trigger,
-    .mat-select-arrow {
-        color: map_get($fuseForeground, hint-text);
-    }
+        .mat-form-field-underline {
+            background-color: map_get($fuseForeground, divider);
+        }

-    .mat-select-underline {
-        background-color: map_get($fuseForeground, divider);
-    }
+        // Select
+        .mat-select-trigger,
+        .mat-select-arrow {
+            color: map_get($fuseForeground, hint-text);
+        }

-    .mat-select-disabled .mat-select-value,
-    .mat-select-arrow,
-    .mat-select-trigger {
-        color: map_get($fuseForeground, hint-text);
-    }
+        .mat-select-underline {
+            background-color: map_get($fuseForeground, divider);
+        }

-    .mat-select-content,
-    .mat-select-panel-done-animating {
-        background: map_get($background, card);
-    }
+        .mat-select-disabled .mat-select-value,
+        .mat-select-arrow,
+        .mat-select-trigger {
+            color: map_get($fuseForeground, hint-text);
+        }

-    .mat-select-value {
-        color: map_get($fuseForeground, text);
+        .mat-select-content,
+        .mat-select-panel-done-animating {
+            background: map_get($background, card);
+        }
+
+        .mat-select-value {
+            color: map_get($fuseForeground, text);
+        }
    }
 }

@@ -180,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
        background-color: $color !important;
        color: $contrastColor !important;

-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($contrastColor);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($contrastColor);
-
        &[disabled] {
            background-color: rgba($color, .12) !important;
            color: rgba($contrastColor, .26) !important;
@@ -196,14 +208,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400

    .#{$colorName}#{$hue}-fg {
        color: $color !important;
-
-        // Generate text color levels
-        // based on current contrast color
-        @include generateTextColorLevels($color);
-
-        // Generate material element colors
-        // based on current contrast color
-        @include generateMaterialElementColors($color);
    }

    .#{$colorName}#{$hue}-border {
@@ -229,49 +233,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400

@mixin generateFuseColorClasses($primary, $accent, $warn) {

-    $colorMap: (
+    $palettes: (
        primary: $primary,
        accent: $accent,
        warn: $warn
    );

+    // Define contrast lists
+    $light-contrasting-classes: ();
+    $dark-contrasting-classes: ();
+
    // Generate the color classes...
-    @each $name, $map in $colorMap {
+    @each $paletteName, $palette in $palettes {

-        @each $hue in $matColorHues {
+        // Get the contrasts map
+        $contrasts: map-get($palette, 'contrast');

-            $color: map-get($map, $hue);
-            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
+        @each $hue in $matHues {

-            @if ($color != null and $contrastColor != null) {
+            // Get the color and the contrasting color
+            $color: map-get($palette, $hue);
+            $contrast: map-get($contrasts, $hue);

-                @include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
+            @if ($color != null and $contrast != null) {
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+                }

                // Run the generator one more time for default values (500)
                @if ($hue == 500) {
-                    @include generateColorClasses($name, $color, $contrastColor, '');
+
+                    // Generate color classes
+                    @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                    // Add color to the correct list depending on the contrasting color
+
+                    // If the contrast color is dark
+                    @if (rgba(black, 1) == rgba($contrast, 1)) {
+                        $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                    }
+                        // if the contrast color is light
+                    @else {
+                        $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                    }
+                }
+            }
+        }
+    }
+
+    // Generate contrasting colors
+    @include generateTextColorLevels($dark-contrasting-classes, 'dark');
+    @include generateTextColorLevels($light-contrasting-classes, 'light');
+    @include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+    @include generateMaterialElementColors($light-contrasting-classes, 'light');
+}
+
+// Generate the color classes...
+
+// Define contrast lists
+$light-contrasting-classes: ();
+$dark-contrasting-classes: ();
+
+@each $paletteName, $palette in $matPalettes {
+
+    // Get the contrasts map
+    $contrasts: map-get($palette, 'contrast');
+
+    @each $hue in $matHues {
+
+        // Get the color and the contrasting color
+        $color: map-get($palette, $hue);
+        $contrast: map-get($contrasts, $hue);
+
+        @if ($color != null and $contrast != null) {
+
+            // Generate color classes
+            @include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
+
+            // Add color to the correct list depending on the contrasting color
+
+            // If the contrast color is dark
+            @if (rgba(black, 1) == rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
+                // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
+            }
+
+            // Run the generator one more time for default values (500)
+            @if ($hue == 500) {
+
+                // Generate color classes
+                @include generateColorClasses($paletteName, $color, $contrast, '');
+
+                // Add color to the correct list depending on the contrasting color
+
+                // If the contrast color is dark
+                @if (rgba(black, 1) == rgba($contrast, 1)) {
+                    $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
+                }
+                    // if the contrast color is light
+                @else {
+                    $light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
                }
            }
        }
    }
 }

-// Generate the color classes...
-@each $colorName, $colorMap in $matColorsMap {
-
-    @each $hue in $matColorHues {
-
-        $color: map-get($colorMap, $hue);
-        $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
-
-        @if ($color != null and $contrastColor != null) {
-
-            @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
-
-            // Run the generator one more time for default values (500)
-            @if ($hue == 500) {
-                @include generateColorClasses($colorName, $color, $contrastColor, '');
-            }
-        }
-    }
-}
+// Generate contrasting colors
+@include generateTextColorLevels($dark-contrasting-classes, 'dark');
+@include generateTextColorLevels($light-contrasting-classes, 'light');
+@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
+@include generateMaterialElementColors($light-contrasting-classes, 'light');
--- a/src/@fuse/scss/partials/_navigation.scss
+++ b/src/@fuse/scss/partials/_navigation.scss
@@ -219,4 +219,26 @@
            }
        }
    }
+
+    // Material style
+    &.material {
+
+        .nav-subheader {
+            border-top: 1px solid rgba(0, 0, 0, 0.12);
+
+            &:first-child {
+                border-top: none;
+            }
+        }
+
+        .nav-item {
+
+            .nav-link {
+                height: 40px;
+                padding: 0 16px;
+                margin: 4px 8px;
+                border-radius: 4px;
+            }
+        }
+    }
 }
--- a/src/@fuse/scss/partials/_print.scss
+++ b/src/@fuse/scss/partials/_print.scss
@@ -36,11 +36,11 @@
    /* General styles */
    app {

-        fuse-navbar-vertical,
-        fuse-navbar-horizontal,
-        fuse-toolbar,
-        fuse-footer,
-        fuse-quick-panel,
+        fuse-sidebar,
+        navbar,
+        toolbar,
+        footer,
+        .theme-options-button,
        fuse-theme-options,
        .ps > .ps__rail-x,
        .ps > .ps__rail-y {
--- a/src/@fuse/services/config.service.ts
+++ b/src/@fuse/services/config.service.ts
@@ -8,7 +8,9 @@ import * as _ from 'lodash';
 // Create the injection token for the custom settings
 export const FUSE_CONFIG = new InjectionToken('fuseCustomConfig');

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseConfigService
 {
    // Private
--- a/src/@fuse/services/copier.service.ts
+++ b/src/@fuse/services/copier.service.ts
@@ -1,14 +1,15 @@
 /**
 * This class is based on the code in the following projects:
- *
- * - https://github.com/zenorocha/select
- * - https://github.com/zenorocha/clipboard.js/
+ * https://github.com/zenorocha/select
+ * https://github.com/zenorocha/clipboard.js/
 *
 * Both released under MIT license - © Zeno Rocha
 */
 import { Injectable } from '@angular/core';

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseCopierService
 {
    private textarea: HTMLTextAreaElement;
--- a/src/@fuse/services/loading-bar.service.ts
+++ b/src/@fuse/services/loading-bar.service.ts
@@ -0,0 +1,91 @@
+import { Injectable } from '@angular/core';
+import { NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class FuseLoadingBarService
+{
+    // Private
+    private _visible: BehaviorSubject<boolean>;
+
+    /**
+     * Constructor
+     *
+     * @param {Router} _router
+     */
+    constructor(
+        private _router: Router
+    )
+    {
+        // Initialize the service
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    get visible(): Observable<any>
+    {
+        // Return the _visible as observable
+        return this._visible.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Initialize the behavior subject
+        this._visible = new BehaviorSubject(false);
+
+        // Subscribe to the router events to show/hide the loading bar
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationStart)
+            )
+            .subscribe(() => {
+                this.showLoadingBar();
+            });
+
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd)
+            )
+            .subscribe(() => {
+                this.hideLoadingBar();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the loading bar
+     */
+    showLoadingBar(): void
+    {
+        // Show
+        this._visible.next(true);
+    }
+
+    /**
+     * Hide the loading bar
+     */
+    hideLoadingBar(): void
+    {
+        // Hide
+        this._visible.next(false);
+    }
+}
+
--- a/src/@fuse/services/match-media.service.ts
+++ b/src/@fuse/services/match-media.service.ts
@@ -2,7 +2,9 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseMatchMediaService
 {
    activeMediaQuery: string;
--- a/src/@fuse/services/splash-screen.service.ts
+++ b/src/@fuse/services/splash-screen.service.ts
@@ -3,7 +3,9 @@ import { DOCUMENT } from '@angular/common';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
 import { NavigationEnd, Router } from '@angular/router';

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseSplashScreenService
 {
    splashScreenEl: any;
--- a/src/@fuse/services/translation-loader.service.ts
+++ b/src/@fuse/services/translation-loader.service.ts
@@ -7,7 +7,9 @@ export interface Locale
    data: Object;
 }

-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseTranslationLoaderService
 {
    /**
--- a/src/@fuse/types/fuse-config.ts
+++ b/src/@fuse/types/fuse-config.ts
@@ -4,20 +4,25 @@ export interface FuseConfig
        style: string,
        width: 'fullwidth' | 'boxed',
        navbar: {
+            background: string,
            hidden: boolean,
            folded: boolean,
            position: 'left' | 'right' | 'top',
-            background: string
+            variant: string
        },
        toolbar: {
+            background: string,
            hidden: boolean,
-            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
-            background: string
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
        }
        footer: {
+            background: string,
            hidden: boolean,
-            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
-            background: string
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
+        },
+        sidepanel: {
+            hidden: boolean,
+            position: 'left' | 'right'
        }
    };
    customScrollbars: boolean;
--- a/src/@fuse/types/fuse-navigation.ts
+++ b/src/@fuse/types/fuse-navigation.ts
@@ -7,6 +7,7 @@ export interface FuseNavigationItem
    icon?: string;
    hidden?: boolean;
    url?: string;
+    classes?: string;
    exactMatch?: boolean;
    externalUrl?: boolean;
    openInNewTab?: boolean;
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -20,6 +20,8 @@

 <!-- THEME OPTIONS PANEL -->
 <button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
+        [ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
+                    'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
        (click)="toggleSidebarOpen('themeOptionsPanel')">
    <mat-icon>settings</mat-icon>
 </button>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,5 @@
+@import "src/@fuse/scss/fuse";
+
 :host {
    position: relative;
    display: flex;
@@ -18,9 +20,20 @@
        border-radius: 0;
        margin: 0;
        pointer-events: auto;
-        opacity: .75;
+        opacity: .90;
        z-index: 998;

+        &.right-side-panel {
+
+            @include media-breakpoint-up('lg') {
+                right: 70px;
+            }
+        }
+
+        &.side-panel-hidden {
+            right: 0 !important;
+        }
+
        mat-icon {
            animation: rotating 3s linear infinite;
        }
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Platform } from '@angular/cdk/platform';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
    /**
     * Constructor
     *
+     * @param {DOCUMENT} document
     * @param {FuseConfigService} _fuseConfigService
     * @param {FuseNavigationService} _fuseNavigationService
     * @param {FuseSidebarService} _fuseSidebarService
     * @param {FuseSplashScreenService} _fuseSplashScreenService
     * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
+     * @param {Platform} _platform
     * @param {TranslateService} _translateService
     */
    constructor(
+        @Inject(DOCUMENT) private document: any,
        private _fuseConfigService: FuseConfigService,
        private _fuseNavigationService: FuseNavigationService,
        private _fuseSidebarService: FuseSidebarService,
        private _fuseSplashScreenService: FuseSplashScreenService,
        private _fuseTranslationLoaderService: FuseTranslationLoaderService,
-        private _translateService: TranslateService
+        private _translateService: TranslateService,
+        private _platform: Platform
    )
    {
        // Get default navigation
@@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
        // Use a language
        this._translateService.use('en');

+        // Add is-mobile class to the body if the platform is mobile
+        if ( this._platform.ANDROID || this._platform.IOS )
+        {
+            this.document.body.className += ' is-mobile';
+        }
+
        // Set the private defaults
        this._unsubscribeAll = new Subject();
    }
--- a/src/app/fake-db/chat-panel.ts
+++ b/src/app/fake-db/chat-panel.ts
@@ -0,0 +1,343 @@
+export class ChatPanelFakeDb
+{
+    public static contacts = [
+        {
+            'id'    : '5725a680b3249760ea21de52',
+            'name'  : 'Alice Freeman',
+            'avatar': 'assets/images/avatars/alice.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '2'
+        },
+        {
+            'id'    : '5725a680606588342058356d',
+            'name'  : 'Arnold',
+            'avatar': 'assets/images/avatars/Arnold.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a68009e20d0a9e9acf2a',
+            'name'  : 'Barrera',
+            'avatar': 'assets/images/avatars/Barrera.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a6809fdd915739187ed5',
+            'name'  : 'Blair',
+            'avatar': 'assets/images/avatars/Blair.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '3'
+        },
+        {
+            'id'    : '5725a68007920cf75051da64',
+            'name'  : 'Boyle',
+            'avatar': 'assets/images/avatars/Boyle.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '1'
+        },
+        {
+            'id'    : '5725a68031fdbb1db2c1af47',
+            'name'  : 'Christy',
+            'avatar': 'assets/images/avatars/Christy.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680bc670af746c435e2',
+            'name'  : 'Copeland',
+            'avatar': 'assets/images/avatars/Copeland.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680e7eb988a58ddf303',
+            'name'  : 'Estes',
+            'avatar': 'assets/images/avatars/Estes.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680dcb077889f758961',
+            'name'  : 'Harper',
+            'avatar': 'assets/images/avatars/Harper.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a6806acf030f9341e925',
+            'name'  : 'Helen',
+            'avatar': 'assets/images/avatars/Helen.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680ae1ae9a3c960d487',
+            'name'  : 'Henderson',
+            'avatar': 'assets/images/avatars/Henderson.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680b8d240c011dd224b',
+            'name'  : 'Josefina',
+            'avatar': 'assets/images/avatars/Josefina.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a68034cb3968e1f79eac',
+            'name'  : 'Katina',
+            'avatar': 'assets/images/avatars/Katina.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a6801146cce777df2a08',
+            'name'  : 'Lily',
+            'avatar': 'assets/images/avatars/Lily.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '10'
+        },
+        {
+            'id'    : '5725a6808a178bfd034d6ecf',
+            'name'  : 'Mai',
+            'avatar': 'assets/images/avatars/Mai.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680653c265f5c79b5a9',
+            'name'  : 'Nancy',
+            'avatar': 'assets/images/avatars/Nancy.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680bbcec3cc32a8488a',
+            'name'  : 'Nora',
+            'avatar': 'assets/images/avatars/Nora.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '7'
+        },
+        {
+            'id'    : '5725a6803d87f1b77e17b62b',
+            'name'  : 'Odessa',
+            'avatar': 'assets/images/avatars/Odessa.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...',
+            'unread': '1'
+        },
+        {
+            'id'    : '5725a680e87cb319bd9bd673',
+            'name'  : 'Reyna',
+            'avatar': 'assets/images/avatars/Reyna.jpg',
+            'status': 'offline',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a6802d10e277a0f35775',
+            'name'  : 'Shauna',
+            'avatar': 'assets/images/avatars/Shauna.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680aef1e5cf26dd3d1f',
+            'name'  : 'Shepard',
+            'avatar': 'assets/images/avatars/Shepard.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a680cd7efa56a45aea5d',
+            'name'  : 'Tillman',
+            'avatar': 'assets/images/avatars/Tillman.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : '',
+            'unread': '99+'
+        },
+        {
+            'id'    : '5725a680fb65c91a82cb35e2',
+            'name'  : 'Trevino',
+            'avatar': 'assets/images/avatars/Trevino.jpg',
+            'status': 'away',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a68018c663044be49cbf',
+            'name'  : 'Tyson',
+            'avatar': 'assets/images/avatars/Tyson.jpg',
+            'status': 'do-not-disturb',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        },
+        {
+            'id'    : '5725a6809413bf8a0a5272b1',
+            'name'  : 'Velazquez',
+            'avatar': 'assets/images/avatars/Velazquez.jpg',
+            'status': 'online',
+            'mood'  : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
+        }
+    ];
+
+    public static chats = [
+        {
+            'id'    : '1725a680b3249760ea21de52',
+            'dialog': [
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
+                    'time'   : '2017-03-22T08:54:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
+                    'time'   : '2017-03-22T08:55:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
+                    'time'   : '2017-03-22T08:55:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:00:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
+                    'time'   : '2017-03-22T09:02:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:05:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:15:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:05:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:15:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
+                    'time'   : '2017-03-22T09:20:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:22:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:25:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
+                    'time'   : '2017-03-22T09:27:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:33:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T09:33:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-03-22T09:35:28.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'It’s not my money, you know. I will eat my breakfast and then I will come to the meeting room.',
+                    'time'   : '2017-03-22T09:45:28.299Z'
+                },
+                {
+                    'who'    : '5725a680b3249760ea21de52',
+                    'message': 'You are the worst!',
+                    'time'   : '2017-03-22T10:00:28.299Z'
+                }
+            ]
+        },
+        {
+            'id'    : '2725a680b8d240c011dd2243',
+            'dialog': [
+                {
+                    'who'    : '5725a680606588342058356d',
+                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
+                    'time'   : '2017-04-22T01:00:00.299Z'
+                },
+                {
+                    'who'    : '5725a6802d10e277a0f35724',
+                    'message': 'I’m having breakfast right now, can’t you wait for 10 minutes?',
+                    'time'   : '2017-04-22T01:05:00.299Z'
+                },
+                {
+                    'who'    : '5725a680606588342058356d',
+                    'message': 'We are losing money! Quick!',
+                    'time'   : '2017-04-22T01:10:00.299Z'
+                }
+            ]
+        },
+        {
+            'id'    : '3725a6809413bf8a0a5272b4',
+            'dialog': [
+                {
+                    'who'    : '5725a68009e20d0a9e9acf2a',
+                    'message': 'Quickly come to the meeting room 1B, we have a big server issue',
+                    'time'   : '2017-04-22T02:10:00.299Z'
+                }
+            ]
+        }
+    ];
+
+    public static user = [
+        {
+            'id'      : '5725a6802d10e277a0f35724',
+            'name'    : 'John Doe',
+            'avatar'  : 'assets/images/avatars/profile.jpg',
+            'status'  : 'online',
+            'mood'    : '',
+            'chatList': [
+                {
+                    'chatId'         : '1725a680b3249760ea21de52',
+                    'contactId'      : '5725a680b3249760ea21de52',
+                    'lastMessageTime': '2017-06-12T02:10:18.931Z'
+                },
+                {
+                    'chatId'         : '2725a680b8d240c011dd2243',
+                    'contactId'      : '5725a680606588342058356d',
+                    'lastMessageTime': '2017-02-18T10:30:18.931Z'
+                },
+                {
+                    'chatId'         : '3725a6809413bf8a0a5272b4',
+                    'contactId'      : '5725a68009e20d0a9e9acf2a',
+                    'lastMessageTime': '2017-03-18T12:30:18.931Z'
+                }
+            ]
+        }
+    ];
+
+}
--- a/src/app/fake-db/fake-db.service.ts
+++ b/src/app/fake-db/fake-db.service.ts
@@ -17,6 +17,7 @@ import { SearchFakeDb } from 'app/fake-db/search';
 import { FaqFakeDb } from 'app/fake-db/faq';
 import { KnowledgeBaseFakeDb } from 'app/fake-db/knowledge-base';
 import { IconsFakeDb } from 'app/fake-db/icons';
+import { ChatPanelFakeDb } from 'app/fake-db/chat-panel';
 import { QuickPanelFakeDb } from 'app/fake-db/quick-panel';

 export class FakeDbService implements InMemoryDbService
@@ -89,6 +90,11 @@ export class FakeDbService implements InMemoryDbService
            // Icons
            'icons': IconsFakeDb.icons,

+            // Chat Panel
+            'chat-panel-contacts' : ChatPanelFakeDb.contacts,
+            'chat-panel-chats': ChatPanelFakeDb.chats,
+            'chat-panel-user': ChatPanelFakeDb.user,
+
            // Quick Panel
            'quick-panel-notes' : QuickPanelFakeDb.notes,
            'quick-panel-events': QuickPanelFakeDb.events
--- a/src/app/fuse-config/index.ts
+++ b/src/app/fuse-config/index.ts
@@ -10,23 +10,28 @@ import { FuseConfig } from '@fuse/types';

 export const fuseConfig: FuseConfig = {
    layout          : {
-        style         : 'vertical-layout-1',
-        width         : 'fullwidth',
-        navbar        : {
+        style    : 'vertical-layout-1',
+        width    : 'fullwidth',
+        navbar   : {
+            background: 'mat-fuse-dark-700-bg',
+            folded    : false,
            hidden    : false,
            position  : 'left',
-            folded    : false,
-            background: 'mat-fuse-dark-700-bg'
+            variant   : 'vertical-style-1'
        },
-        toolbar       : {
+        toolbar  : {
+            background: 'mat-white-500-bg',
            hidden    : false,
-            position  : 'below-static',
-            background: 'mat-white-500-bg'
+            position  : 'below-static'
        },
-        footer        : {
+        footer   : {
+            background: 'mat-fuse-dark-900-bg',
            hidden    : false,
-            position  : 'below-static',
-            background: 'mat-fuse-dark-900-bg'
+            position  : 'below-fixed'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
        }
    },
    customScrollbars: true
--- a/src/app/layout/components/chat-panel/chat-panel.component.html
+++ b/src/app/layout/components/chat-panel/chat-panel.component.html
@@ -0,0 +1,140 @@
+<div class="header mat-elevation-z4 mat-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
+
+    <ng-container *ngIf="selectedContact === null">
+
+        <div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
+             (click)="unfoldSidebarTemporarily()">
+            <mat-icon class="s-32 white-fg">chat</mat-icon>
+            <h3 class="ml-12">Team Chat</h3>
+        </div>
+
+    </ng-container>
+
+    <ng-container *ngIf="selectedContact !== null">
+
+        <div class="title" fxLayout="row" fxLayoutAlign="start center">
+            <img [src]="selectedContact.avatar" class="avatar mx-16">
+            <h3 class="text-truncate">{{selectedContact.name}}</h3>
+        </div>
+
+    </ng-container>
+
+    <button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
+            fxHide fxShow.gt-md>
+        <mat-icon class="secondary-text s-20">close</mat-icon>
+    </button>
+
+    <button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
+            fxHide.gt-md>
+        <mat-icon class="secondary-text">close</mat-icon>
+    </button>
+
+</div>
+
+<div class="content">
+
+    <!-- Contacts -->
+    <div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+
+        <div *ngFor="let contact of contacts"
+             class="contacts-list-item"
+             [ngClass]="contact.status"
+             [class.active]="contact.id === selectedContact?.id"
+             (click)="toggleChat(contact)">
+
+            <img class="avatar" [src]="contact.avatar"
+                 [matTooltip]="contact.name"
+                 matTooltipPosition="left">
+            <div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
+            <div class="status-icon" [ngClass]="contact.status"></div>
+
+        </div>
+
+    </div>
+    <!-- / Contacts -->
+
+    <!-- Chat -->
+    <div id="chat" fxLayout="column" fxFlex="1 1 auto">
+
+        <div id="messages" class="messages" fxFlex="1 1 auto" fusePerfectScrollbar>
+
+            <ng-container *ngIf="chat && chat.dialog && chat.dialog.length > 0">
+
+                <div *ngFor="let message of chat.dialog; let i = index" class="message-row"
+                     [ngClass]="{
+                            'me': message.who === user.id,
+                            'contact': message.who !== user.id,
+                            'first-of-group': isFirstMessageOfGroup(message, i),
+                            'last-of-group': isLastMessageOfGroup(message, i)
+                            }">
+
+                    <img *ngIf="shouldShowContactAvatar(message, i)"
+                         src="{{selectedContact.avatar}}"
+                         class="avatar">
+
+                    <div class="bubble">
+                        <div class="message">{{message.message}}</div>
+                        <div class="time secondary-text">{{message.time | date:'short'}}</div>
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
+
+                <div class="no-messages-icon">
+                    <mat-icon class="s-128">chat</mat-icon>
+                </div>
+
+                <div class="no-messages secondary-text">
+                    Start a conversation by typing your message below.
+                </div>
+
+            </ng-container>
+
+            <ng-container *ngIf="!selectedContact">
+
+                <div class="no-contact-selected">
+
+                    <div class="no-contact-icon">
+                        <mat-icon class="s-128">chat</mat-icon>
+                    </div>
+
+                    <div class="no-contact secondary-text">
+                        Select a contact to start a conversation.
+                    </div>
+
+                </div>
+
+            </ng-container>
+
+        </div>
+
+        <div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
+             *ngIf="selectedContact">
+
+            <form #replyForm="ngForm"
+                  (ngSubmit)="reply($event)"
+                  (keydown.enter)="reply($event)"
+                  fxFlex
+                  fxLayout="row"
+                  fxLayoutAlign="start center">
+
+                <mat-form-field class="message-text" fxFlex floatLabel="never" appearance="standard">
+                    <textarea matInput #replyInput ngModel name="message" placeholder="Type your message"
+                              [rows]="1" [matTextareaAutosize]="true"></textarea>
+                </mat-form-field>
+
+                <button class="send-message-button" mat-icon-button type="submit" aria-label="Send message">
+                    <mat-icon class="secondary-text">send</mat-icon>
+                </button>
+
+            </form>
+
+        </div>
+
+    </div>
+    <!-- / Chat -->
+
+</div>
--- a/src/app/layout/components/chat-panel/chat-panel.component.scss
+++ b/src/app/layout/components/chat-panel/chat-panel.component.scss
@@ -0,0 +1,465 @@
+@import "src/@fuse/scss/fuse";
+
+chat-panel {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 360px;
+    min-width: 360px;
+    max-width: 360px;
+    z-index: 99;
+    overflow: hidden;
+
+    @include media-breakpoint-down('xs') {
+        max-width: none !important;
+        width: 100% !important;
+    }
+
+    .header {
+        position: relative;
+        height: 64px;
+        max-height: 64px;
+        min-height: 64px;
+        z-index: 10;
+
+        .title {
+            cursor: pointer;
+
+            mat-icon {
+                margin-left: 4px;
+            }
+
+            h3 {
+                max-width: 120px;
+                transition: opacity 300ms ease-in-out;
+            }
+        }
+
+    }
+
+    .content {
+        flex: 1 1 100%;
+        min-height: 0;
+    }
+
+    #contacts-list {
+        position: relative;
+        z-index: 5;
+        padding: 16px 0;
+        overflow: auto;
+        width: 72px;
+        min-width: 72px;
+        max-width: 72px;
+        background-color: #F9F9F9;
+        -webkit-overflow-scrolling: touch;
+
+        // Perfect scrollbar
+        .ps__rail-y {
+            width: 3px !important;
+
+            .ps__thumb-y {
+                width: 3px !important;
+            }
+        }
+
+        .contacts-list-item {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 16px;
+            height: 56px;
+            cursor: pointer;
+
+            &.active {
+                position: relative;
+                background-color: mat-color(mat-palette($mat-indigo, 50));
+
+                .status-icon {
+                    border-color: mat-color(mat-palette($mat-indigo, 50));
+                }
+
+                &:after {
+                    position: absolute;
+                    top: 8px;
+                    right: 0;
+                    bottom: 8px;
+                    content: "";
+                    width: 4px;
+                    border-top-left-radius: 4px;
+                    border-bottom-left-radius: 4px;
+                    background-color: mat-color(mat-palette($mat-indigo));
+                }
+            }
+
+            &.offline {
+
+                .mat-list-item-content {
+
+                    img {
+                        filter: grayscale(100%);
+                        opacity: 0.7;
+                    }
+
+                    h3 {
+                        opacity: 0.7;
+                    }
+                }
+            }
+
+            .avatar {
+                margin: 0;
+                width: 32px;
+                height: 32px;
+                min-width: 32px;
+            }
+
+            .unread-count {
+                position: absolute;
+                min-width: 18px;
+                height: 18px;
+                top: 8px;
+                left: 12px;
+                border-radius: 9px;
+                padding: 0 5px;
+                font-size: 11px;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: mat-color(mat-palette($mat-indigo));
+                color: white;
+                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
+            }
+
+            .status-icon {
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                bottom: 10px;
+                left: 44px;
+                border: 2px solid #F9F9F9;
+                border-radius: 50%;
+
+                &.online {
+                    background-color: #4CAF50;
+                }
+
+                &.do-not-disturb {
+                    background-color: #F44336;
+                }
+
+                &.away {
+                    background-color: #FFC107;
+                }
+
+                &.offline {
+                    background-color: #646464;
+                }
+            }
+        }
+    }
+
+    #chat {
+        position: relative;
+        z-index: 7;
+        flex: 1 1 100%;
+        background-color: white;
+        box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
+
+        .messages {
+            position: relative;
+            overflow: auto;
+            padding: 16px 0 40px 40px;
+
+            .message-row {
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: flex-end;
+                padding: 0 16px 4px 16px;
+
+                .avatar {
+                    position: absolute;
+                    left: -32px;
+                    margin: 0;
+                }
+
+                .bubble {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    padding: 12px;
+                    max-width: 100%;
+
+                    .message {
+                        white-space: pre-wrap;
+                        line-height: 1.2;
+                    }
+
+                    .time {
+                        position: absolute;
+                        display: none;
+                        width: 100%;
+                        font-size: 11px;
+                        margin-top: 8px;
+                        top: 100%;
+                        left: 0;
+                        color: $black-87-opacity;
+                        white-space: nowrap;
+                    }
+                }
+
+                &.contact {
+
+                    .bubble {
+                        background-color: mat-color(mat-palette($mat-indigo));
+                        color: white;
+
+                        border-top-left-radius: 5px;
+                        border-bottom-left-radius: 5px;
+
+                        border-top-right-radius: 20px;
+                        border-bottom-right-radius: 20px;
+
+                        .time {
+                            margin-left: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-left-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-left-radius: 20px;
+                        }
+                    }
+                }
+
+                &.me {
+                    padding-left: 40px;
+
+                    .avatar {
+                        order: 2;
+                        margin: 0 0 0 16px;
+                    }
+
+                    .bubble {
+                        margin-left: auto;
+                        background-color: #E0E0E0;
+                        color: $black-87-opacity;
+
+                        border-top-left-radius: 20px;
+                        border-bottom-left-radius: 20px;
+
+                        border-top-right-radius: 5px;
+                        border-bottom-right-radius: 5px;
+
+                        .time {
+                            justify-content: flex-end;
+                            right: 0;
+                            margin-right: 12px;
+                        }
+                    }
+
+                    &.first-of-group {
+
+                        .bubble {
+                            border-top-right-radius: 20px;
+                        }
+                    }
+
+                    &.last-of-group {
+
+                        .bubble {
+                            border-bottom-right-radius: 20px;
+                        }
+                    }
+                }
+
+                &.contact + .me,
+                &.me + .contact {
+                    padding-top: 20px;
+                    margin-top: 20px;
+                }
+
+                &.first-of-group {
+
+                    .bubble {
+                        border-top-left-radius: 20px;
+                        padding-top: 13px;
+                    }
+                }
+
+                &.last-of-group {
+
+                    .bubble {
+                        border-bottom-left-radius: 20px;
+                        padding-bottom: 13px;
+
+                        .time {
+                            display: flex;
+                        }
+                    }
+                }
+            }
+
+            .no-messages-icon {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                padding: 0 24px;
+                margin-top: -64px;
+                text-align: center;
+
+                mat-icon {
+                    color: rgba(0, 0, 0, 0.06);
+                }
+            }
+
+            .no-messages {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                padding: 0 16px 24px 16px;
+                text-align: center;
+            }
+
+            .no-contact-selected {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                left: 0;
+                transform: translateY(-50%);
+                padding: 0 24px;
+                text-align: center;
+
+                .no-contact-icon {
+
+                    mat-icon {
+                        color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+
+                .no-contact {
+                    margin-top: 24px;
+                }
+            }
+        }
+
+        .reply-form {
+            position: relative;
+
+            .message-text {
+                background-color: #E0E0E0;
+                padding: 16px 8px;
+
+                .mat-form-field-wrapper {
+                    padding: 0;
+
+                    .mat-form-field-flex {
+                        padding: 0;
+
+                        .mat-form-field-infix {
+                            padding: 0;
+                            border: none;
+                            background: white;
+                            border-radius: 20px;
+                            @include mat-elevation(2);
+
+                            textarea {
+                                overflow: hidden;
+                                margin: 16px 48px 16px 16px;
+                                width: calc(100% - 64px);
+                                padding: 0;
+                            }
+                        }
+                    }
+
+                    .mat-form-field-underline {
+                        display: none !important;
+                    }
+                }
+            }
+
+            .send-message-button {
+                position: absolute;
+                right: 16px;
+                bottom: 21px;
+            }
+        }
+    }
+}
+
+fuse-sidebar {
+
+    &.chat-panel {
+        width: 360px;
+        min-width: 360px;
+        max-width: 360px;
+
+        @include media-breakpoint-down('xs') {
+            min-width: 0 !important;
+            max-width: 100vw !important;
+            width: 100vw !important;
+        }
+
+        &.left-chat-panel {
+
+            .header {
+
+                .toggle-sidebar-folded,
+                .toggle-sidebar-open {
+
+                    mat-icon {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+        }
+
+        // Folded
+        &.folded {
+
+            chat-panel {
+
+                .header {
+
+                    .title {
+
+                        h3 {
+                            opacity: 0;
+                        }
+                    }
+                }
+            }
+
+            // Folded unfolded
+            &.unfolded {
+
+                chat-panel {
+
+                    .header {
+
+                        .title {
+
+                            h3 {
+                                opacity: 1;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/app/layout/components/chat-panel/chat-panel.component.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.component.ts
@@ -0,0 +1,286 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@Component({
+    selector     : 'chat-panel',
+    templateUrl  : './chat-panel.component.html',
+    styleUrls    : ['./chat-panel.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
+{
+    contacts: any[];
+    chat: any;
+    selectedContact: any;
+    sidebarFolded: boolean;
+    user: any;
+
+    @ViewChild('replyForm')
+    set replyForm(content: NgForm)
+    {
+        this._replyForm = content;
+    }
+
+    @ViewChild('replyInput')
+    set replyInput(content: ElementRef)
+    {
+        this._replyInput = content;
+    }
+
+    @ViewChildren(FusePerfectScrollbarDirective)
+    private _fusePerfectScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;
+
+    // Private
+    private _chatViewScrollbar: FusePerfectScrollbarDirective;
+    private _replyForm: NgForm;
+    private _replyInput: ElementRef;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {ChatPanelService} _chatPanelService
+     * @param {HttpClient} _httpClient
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _chatPanelService: ChatPanelService,
+        private _httpClient: HttpClient,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the defaults
+        this.selectedContact = null;
+        this.sidebarFolded = true;
+
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Load the contacts
+        this._chatPanelService.loadContacts().then(() => {
+
+            this.contacts = this._chatPanelService.contacts;
+            this.user = this._chatPanelService.user;
+        });
+
+        // Subscribe to the foldedChanged observable
+        this._fuseSidebarService.getSidebar('chatPanel').foldedChanged
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((folded) => {
+                this.sidebarFolded = folded;
+            });
+    }
+
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        this._chatViewScrollbar = this._fusePerfectScrollbarDirectives.find((directive) => {
+            return directive.elementRef.nativeElement.id === 'messages';
+        });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Prepare the chat for the replies
+     */
+    private _prepareChatForReplies(): void
+    {
+        setTimeout(() => {
+
+            // Reset the reply form
+            this._replyForm.reset();
+
+            // Focus to the reply input
+            // this._replyInput.nativeElement.focus();
+
+            // Scroll to the bottom of the messages list
+            if ( this._chatViewScrollbar )
+            {
+                this._chatViewScrollbar.update();
+
+                setTimeout(() => {
+                    this._chatViewScrollbar.scrollToBottom(0);
+                });
+            }
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Fold the temporarily unfolded sidebar back
+     */
+    foldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').foldTemporarily();
+    }
+
+    /**
+     * Unfold the sidebar temporarily
+     */
+    unfoldSidebarTemporarily(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').unfoldTemporarily();
+    }
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpen(): void
+    {
+        this._fuseSidebarService.getSidebar('chatPanel').toggleOpen();
+    }
+
+    /**
+     * Decide whether to show or not the contact's avatar in the message row
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    shouldShowContactAvatar(message, i): boolean
+    {
+        return (
+            message.who === this.selectedContact.id &&
+            ((this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== this.selectedContact.id) || !this.chat.dialog[i + 1])
+        );
+    }
+
+    /**
+     * Check if the given message is the first message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isFirstMessageOfGroup(message, i): boolean
+    {
+        return (i === 0 || this.chat.dialog[i - 1] && this.chat.dialog[i - 1].who !== message.who);
+    }
+
+    /**
+     * Check if the given message is the last message of a group
+     *
+     * @param message
+     * @param i
+     * @returns {boolean}
+     */
+    isLastMessageOfGroup(message, i): boolean
+    {
+        return (i === this.chat.dialog.length - 1 || this.chat.dialog[i + 1] && this.chat.dialog[i + 1].who !== message.who);
+    }
+
+    /**
+     * Toggle chat with the contact
+     *
+     * @param contact
+     */
+    toggleChat(contact): void
+    {
+        // If the contact equals to the selectedContact,
+        // that means we will deselect the contact and
+        // unload the chat
+        if ( this.selectedContact && contact.id === this.selectedContact.id )
+        {
+            // Reset
+            this.resetChat();
+        }
+        // Otherwise, we will select the contact, open
+        // the sidebar and start the chat
+        else
+        {
+            // Unfold the sidebar temporarily
+            this.unfoldSidebarTemporarily();
+
+            // Set the selected contact
+            this.selectedContact = contact;
+
+            // Load the chat
+            this._chatPanelService.getChat(contact.id).then((chat) => {
+
+                // Set the chat
+                this.chat = chat;
+
+                // Prepare the chat for the replies
+                this._prepareChatForReplies();
+            });
+        }
+    }
+
+    /**
+     * Remove the selected contact and unload the chat
+     */
+    resetChat(): void
+    {
+        // Set the selected contact as null
+        this.selectedContact = null;
+
+        // Set the chat as null
+        this.chat = null;
+    }
+
+    /**
+     * Reply
+     */
+    reply(event): void
+    {
+        event.preventDefault();
+
+        if ( !this._replyForm.form.value.message )
+        {
+            return;
+        }
+
+        // Message
+        const message = {
+            who    : this.user.id,
+            message: this._replyForm.form.value.message,
+            time   : new Date().toISOString()
+        };
+
+        // Add the message to the chat
+        this.chat.dialog.push(message);
+
+        // Update the server
+        this._chatPanelService.updateChat(this.chat.id, this.chat.dialog).then(response => {
+
+            // Prepare the chat for the replies
+            this._prepareChatForReplies();
+        });
+    }
+}
--- a/src/app/layout/components/chat-panel/chat-panel.module.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.module.ts
@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
+
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { ChatPanelComponent } from 'app/layout/components/chat-panel/chat-panel.component';
+import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.service';
+
+@NgModule({
+    declarations: [
+        ChatPanelComponent
+    ],
+    providers   : [
+        ChatPanelService
+    ],
+    imports     : [
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatTabsModule,
+        MatTooltipModule,
+        MatRippleModule,
+
+        FuseSharedModule
+    ],
+    exports     : [
+        ChatPanelComponent
+    ]
+})
+export class ChatPanelModule
+{
+}
--- a/src/app/layout/components/chat-panel/chat-panel.service.ts
+++ b/src/app/layout/components/chat-panel/chat-panel.service.ts
@@ -0,0 +1,182 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { FuseUtils } from '@fuse/utils';
+
+@Injectable()
+export class ChatPanelService
+{
+    contacts: any[];
+    chats: any[];
+    user: any;
+
+    /**
+     * Constructor
+     *
+     * @param {HttpClient} _httpClient
+     */
+    constructor(
+        private _httpClient: HttpClient
+    )
+    {
+    }
+
+    /**
+     * Loader
+     *
+     * @returns {Promise<any> | any}
+     */
+    loadContacts(): Promise<any> | any
+    {
+        return new Promise((resolve, reject) => {
+            Promise.all([
+                this.getContacts(),
+                this.getUser()
+            ]).then(
+                ([contacts, user]) => {
+                    this.contacts = contacts;
+                    this.user = user;
+                    resolve();
+                },
+                reject
+            );
+        });
+    }
+
+    /**
+     * Get chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    getChat(contactId): Promise<any>
+    {
+        const chatItem = this.user.chatList.find((item) => {
+            return item.contactId === contactId;
+        });
+
+        // Get the chat
+        return new Promise((resolve, reject) => {
+
+            // If there is a chat with this user, return that.
+            if ( chatItem )
+            {
+                this._httpClient.get('api/chat-panel-chats/' + chatItem.chatId)
+                    .subscribe((chat) => {
+
+                        // Resolve the promise
+                        resolve(chat);
+
+                    }, reject);
+            }
+            // If there is no chat with this user, create one...
+            else
+            {
+                this.createNewChat(contactId).then(() => {
+
+                    // and then recall the getChat method
+                    this.getChat(contactId).then((chat) => {
+                        resolve(chat);
+                    });
+                });
+            }
+        });
+    }
+
+    /**
+     * Create new chat
+     *
+     * @param contactId
+     * @returns {Promise<any>}
+     */
+    createNewChat(contactId): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            // Generate a new id
+            const chatId = FuseUtils.generateGUID();
+
+            // Prepare the chat object
+            const chat = {
+                id    : chatId,
+                dialog: []
+            };
+
+            // Prepare the chat list entry
+            const chatListItem = {
+                chatId         : chatId,
+                contactId      : contactId,
+                lastMessageTime: '2017-02-18T10:30:18.931Z'
+            };
+
+            // Add new chat list item to the user's chat list
+            this.user.chatList.push(chatListItem);
+
+            // Post the created chat to the server
+            this._httpClient.post('api/chat-panel-chats', {...chat})
+                .subscribe(() => {
+
+                    // Post the updated user data to the server
+                    this._httpClient.post('api/chat-panel-user/' + this.user.id, this.user)
+                        .subscribe(() => {
+
+                            // Resolve the promise
+                            resolve();
+                        });
+                }, reject);
+        });
+    }
+
+    /**
+     * Update the chat
+     *
+     * @param chatId
+     * @param dialog
+     * @returns {Promise<any>}
+     */
+    updateChat(chatId, dialog): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+
+            const newData = {
+                id    : chatId,
+                dialog: dialog
+            };
+
+            this._httpClient.post('api/chat-panel-chats/' + chatId, newData)
+                .subscribe(updatedChat => {
+                    resolve(updatedChat);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get contacts
+     *
+     * @returns {Promise<any>}
+     */
+    getContacts(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-contacts')
+                .subscribe((response: any) => {
+                    resolve(response);
+                }, reject);
+        });
+    }
+
+    /**
+     * Get user
+     *
+     * @returns {Promise<any>}
+     */
+    getUser(): Promise<any>
+    {
+        return new Promise((resolve, reject) => {
+            this._httpClient.get('api/chat-panel-user')
+                .subscribe((response: any) => {
+                    resolve(response[0]);
+                }, reject);
+        });
+    }
+}
--- a/src/app/layout/components/footer/footer.component.html
+++ b/src/app/layout/components/footer/footer.component.html
@@ -2,7 +2,7 @@

    <div fxLayout="row" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="space-between center" fxFlex>

-        <a href="http://themeforest.net/item/fuse-angularjs-material-design-admin-template/12931855?ref=srcn"
+        <a href="https://1.envato.market/c/1257954/275988/4415?u=https%3A%2F%2Fthemeforest.net%2Fitem%2Ffuse-angularjs-material-design-admin-template%2F12931855"
           target="_blank" mat-button class="mat-pink-bg" fxFlex="0 0 auto" fxLayout="row"
           fxLayoutAlign="start center">
            <mat-icon class="s-16 mr-sm-4">shopping_cart</mat-icon>
@@ -16,7 +16,6 @@
        </div>


-
    </div>

 </mat-toolbar>
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.component.html
+++ b/src/app/layout/components/navbar/horizontal/style-1/style-1.component.html
@@ -0,0 +1 @@
+<fuse-navigation layout="horizontal"></fuse-navigation>
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss
@@ -0,0 +1,3 @@
+navbar-horizontal-style-1 {
+
+}
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts
+++ b/src/app/layout/components/navbar/horizontal/style-1/style-1.component.ts
@@ -0,0 +1,65 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-horizontal-style-1',
+    templateUrl  : './style-1.component.html',
+    styleUrls    : ['./style-1.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarHorizontalStyle1Component implements OnInit, OnDestroy
+{
+    navigation: any;
+
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     */
+    constructor(
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}
--- a/src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts
+++ b/src/app/layout/components/navbar/horizontal/style-1/style-1.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarHorizontalStyle1Component } from 'app/layout/components/navbar/horizontal/style-1/style-1.component';
+
+@NgModule({
+    declarations: [
+        NavbarHorizontalStyle1Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarHorizontalStyle1Component
+    ]
+})
+export class NavbarHorizontalStyle1Module
+{
+}
--- a/src/app/layout/components/navbar/navbar.component.html
+++ b/src/app/layout/components/navbar/navbar.component.html
@@ -1,39 +1,11 @@
-<ng-container *ngIf="layout == 'vertical'">
-
-    <div class="navbar-vertical">
-
-        <div class="navbar-header">
-
-            <div class="logo">
-                <img class="logo-icon" src="assets/images/logos/fuse.svg">
-                <span class="logo-text">FUSE</span>
-            </div>
-
-            <button mat-icon-button class="toggle-sidebar-folded"
-                    (click)="toggleSidebarFolded()" fxHide.lt-lg>
-                <mat-icon>menu</mat-icon>
-            </button>
-
-            <button mat-icon-button class="toggle-sidebar-opened"
-                    (click)="toggleSidebarOpened()" fxHide.gt-md>
-                <mat-icon>arrow_back</mat-icon>
-            </button>
-
-        </div>
-
-        <div class="navbar-content" fusePerfectScrollbar
-             [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-            <fuse-navigation layout="vertical"></fuse-navigation>
-        </div>
-
-    </div>
-
+<ng-container *ngIf="variant === 'horizontal-style-1'">
+    <navbar-horizontal-style-1></navbar-horizontal-style-1>
 </ng-container>

-<ng-container *ngIf="layout == 'horizontal'">
+<ng-container *ngIf="variant === 'vertical-style-1'">
+    <navbar-vertical-style-1></navbar-vertical-style-1>
+</ng-container>

-    <div class="navbar-horizontal">
-        <fuse-navigation layout="horizontal"></fuse-navigation>
-    </div>
-
-</ng-container>
+<ng-container *ngIf="variant === 'vertical-style-2'">
+    <navbar-vertical-style-2></navbar-vertical-style-2>
+</ng-container>
--- a/src/app/layout/components/navbar/navbar.component.scss
+++ b/src/app/layout/components/navbar/navbar.component.scss
@@ -1,81 +1,7 @@
-@import "src/@fuse/scss/fuse";
-
-fuse-sidebar {
-
-    &.folded:not(.unfolded) {
-
-        .navbar-vertical {
-
-            .navbar-header {
-                padding: 0 13px;
-
-                .logo {
-
-                    .logo-text {
-                        opacity: 0;
-                        transition: opacity 200ms ease;
-                    }
-                }
-            }
-        }
-    }
-}
-
 navbar {
-
-    &:not(.top-navbar) {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .navbar-vertical {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-
-        .navbar-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 64px;
-            min-height: 64px;
-            padding: 0 16px 0 24px;
-            transition: padding 200ms ease;
-            background-color: rgba(255, 255, 255, .05);
-            @include mat-elevation(1);
-
-            .logo {
-                display: flex;
-                align-items: center;
-
-                .logo-icon {
-                    width: 38px;
-                    height: 38px;
-                }
-
-                .logo-text {
-                    margin-left: 8px;
-                    font-size: 20px;
-                    font-weight: 300;
-                    letter-spacing: 0.4px;
-                }
-            }
-        }
-
-        .navbar-content {
-            flex: 1 1 auto;
-            overflow-y: auto;
-        }
-    }
-
-    &.right-navbar {
-
-        .toggle-sidebar-opened {
-
-            mat-icon {
-                transform: rotate(180deg);
-            }
-        }
-    }
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
 }
--- a/src/app/layout/components/navbar/navbar.component.ts
+++ b/src/app/layout/components/navbar/navbar.component.ts
@@ -1,11 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationEnd, Router } from '@angular/router';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
-
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
-import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
-import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+import { Component, Input, ViewEncapsulation } from '@angular/core';

@Component({
    selector     : 'navbar',
@@ -13,125 +6,18 @@ import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
    styleUrls    : ['./navbar.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
-export class NavbarComponent implements OnInit, OnDestroy
+export class NavbarComponent
 {
-    // Layout
+    // Variant
    @Input()
-    layout;
-
-    fusePerfectScrollbarUpdateTimeout: any;
-    navigation: any;
-
-    // Private
-    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
-    private _unsubscribeAll: Subject<any>;
+    variant;

    /**
     * Constructor
-     *
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
     */
-    constructor(
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _router: Router
-    )
+    constructor()
    {
        // Set the defaults
-        this.layout = 'vertical';
-
-        // Set the private defaults
-        this._unsubscribeAll = new Subject();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    // Directive
-    @ViewChild(FusePerfectScrollbarDirective)
-    set directive(theDirective: FusePerfectScrollbarDirective)
-    {
-        if ( !theDirective )
-        {
-            return;
-        }
-
-        this._fusePerfectScrollbar = theDirective;
-
-        this._fuseNavigationService.onItemCollapseToggled
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(() => {
-                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
-                    this._fusePerfectScrollbar.update();
-                }, 310);
-            });
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd),
-                takeUntil(this._unsubscribeAll)
-            )
-            .subscribe(() => {
-                    if ( this._fuseSidebarService.getSidebar('navbar') )
-                    {
-                        this._fuseSidebarService.getSidebar('navbar').close();
-                    }
-                }
-            );
-
-        // Get current navigation
-        this._fuseNavigationService.onNavigationChanged
-            .pipe(filter(value => value !== null))
-            .subscribe(() => {
-                this.navigation = this._fuseNavigationService.getCurrentNavigation();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        if ( this.fusePerfectScrollbarUpdateTimeout )
-        {
-            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
-        }
-
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle sidebar opened status
-     */
-    toggleSidebarOpened(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
-    }
-
-    /**
-     * Toggle sidebar folded status
-     */
-    toggleSidebarFolded(): void
-    {
-        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+        this.variant = 'vertical-style-1';
    }
 }
--- a/src/app/layout/components/navbar/navbar.module.ts
+++ b/src/app/layout/components/navbar/navbar.module.ts
@@ -1,21 +1,22 @@
 import { NgModule } from '@angular/core';
-import { MatButtonModule, MatIconModule } from '@angular/material';

-import { FuseNavigationModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

 import { NavbarComponent } from 'app/layout/components/navbar/navbar.component';
+import { NavbarHorizontalStyle1Module } from 'app/layout/components/navbar/horizontal/style-1/style-1.module';
+import { NavbarVerticalStyle1Module } from 'app/layout/components/navbar/vertical/style-1/style-1.module';
+import { NavbarVerticalStyle2Module } from 'app/layout/components/navbar/vertical/style-2/style-2.module';

@NgModule({
    declarations: [
        NavbarComponent
    ],
    imports     : [
-        MatButtonModule,
-        MatIconModule,
-
        FuseSharedModule,
-        FuseNavigationModule
+
+        NavbarHorizontalStyle1Module,
+        NavbarVerticalStyle1Module,
+        NavbarVerticalStyle2Module
    ],
    exports     : [
        NavbarComponent
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.html
@@ -0,0 +1,41 @@
+<div class="navbar-top mat-indigo-700-bg">
+
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+        <span class="logo-text secondary-text">FUSE</span>
+    </div>
+
+    <div class="buttons">
+
+        <button mat-icon-button class="toggle-sidebar-folded"
+                (click)="toggleSidebarFolded()" fxHide.lt-lg>
+            <mat-icon class="secondary-text">menu</mat-icon>
+        </button>
+
+        <button mat-icon-button class="toggle-sidebar-opened"
+                (click)="toggleSidebarOpened()" fxHide.gt-md>
+            <mat-icon class="secondary-text">arrow_back</mat-icon>
+        </button>
+
+    </div>
+
+</div>
+
+
+<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+
+    <div class="user mat-indigo-700-bg" fxLayout="column">
+
+        <div class="h3 username">Charlie Adams</div>
+        <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
+        <div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
+            <img class="avatar" src="assets/images/avatars/Velazquez.jpg">
+        </div>
+
+    </div>
+
+    <div class="navbar-content">
+        <fuse-navigation layout="vertical"></fuse-navigation>
+    </div>
+
+</div>
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
@@ -0,0 +1,168 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-sidebar {
+
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
+
+        &.folded:not(.unfolded) {
+
+            navbar {
+
+                navbar-vertical-style-1 {
+
+                    .navbar-top {
+                        padding: 12px 0;
+                        justify-content: center;
+
+                        .buttons {
+                            display: none;
+                        }
+
+                        .logo {
+
+                            .logo-icon {
+                                width: 32px;
+                                height: 32px;
+                            }
+
+                            .logo-text {
+                                display: none;
+                            }
+                        }
+                    }
+
+                    .navbar-scroll-container {
+
+                        .user {
+                            padding: 12px 0;
+
+                            .avatar-container {
+                                position: relative;
+                                top: auto;
+                                padding: 0;
+                                transform: translateX(0);
+                                left: auto;
+
+                                .avatar {
+                                    width: 40px;
+                                    height: 40px;
+                                }
+                            }
+
+                            .username,
+                            .email {
+                                display: none;
+                            }
+                        }
+
+                        .navbar-content {
+                            margin-top: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+navbar {
+
+    navbar-vertical-style-1 {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        .navbar-top {
+            display: flex;
+            flex-direction: row;
+            flex: 1 0 auto;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 64px;
+            max-height: 64px;
+            height: 64px;
+            padding: 12px 12px 12px 20px;
+
+            @include media-breakpoint('xs') {
+                min-height: 56px;
+                max-height: 56px;
+                height: 56px;
+            }
+
+            .logo {
+                display: flex;
+                align-items: center;
+
+                .logo-icon {
+                    width: 24px;
+                    height: 24px;
+                }
+
+                .logo-text {
+                    margin-left: 12px;
+                    font-size: 16px;
+                    font-weight: 300;
+                    letter-spacing: 0.4px;
+                    line-height: normal;
+                }
+            }
+
+            .buttons {
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        .navbar-scroll-container {
+            overflow-y: auto;
+
+            background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
+            linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
+
+            background-repeat: no-repeat;
+            background-size: 100% 40px, 100% 10px;
+            background-attachment: local, scroll;
+
+            .user {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                width: 100%;
+                padding: 24px 0 64px 0;
+
+                .avatar-container {
+                    position: absolute;
+                    top: 92px;
+                    border-radius: 50%;
+                    padding: 8px;
+                    transform: translateX(-50%);
+                    left: 50%;
+
+                    .avatar {
+                        width: 72px;
+                        height: 72px;
+                        margin: 0;
+                    }
+                }
+            }
+
+            .navbar-content {
+                flex: 1 1 auto;
+                margin-top: 32px;
+            }
+        }
+    }
+
+    &.right-navbar {
+
+        .toggle-sidebar-opened {
+
+            mat-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.ts
@@ -0,0 +1,167 @@
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { filter, take, takeUntil } from 'rxjs/operators';
+
+import { FuseConfigService } from '@fuse/services/config.service';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-vertical-style-1',
+    templateUrl  : './style-1.component.html',
+    styleUrls    : ['./style-1.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarVerticalStyle1Component implements OnInit, OnDestroy
+{
+    fuseConfig: any;
+    fusePerfectScrollbarUpdateTimeout: any;
+    navigation: any;
+
+    // Private
+    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {Router} _router
+     */
+    constructor(
+        private _fuseConfigService: FuseConfigService,
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _router: Router
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    // Directive
+    @ViewChild(FusePerfectScrollbarDirective)
+    set directive(theDirective: FusePerfectScrollbarDirective)
+    {
+        if ( !theDirective )
+        {
+            return;
+        }
+
+        this._fusePerfectScrollbar = theDirective;
+
+        // Update the scrollbar on collapsable item toggle
+        this._fuseNavigationService.onItemCollapseToggled
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this._fusePerfectScrollbar.update();
+                }, 310);
+            });
+
+        // Scroll to the active item position
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                take(1)
+            )
+            .subscribe(() => {
+                    setTimeout(() => {
+                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+
+                        if ( activeNavItem )
+                        {
+                            const activeItemOffsetTop       = activeNavItem.offsetTop,
+                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
+                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3) - 168;
+
+                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
+                        }
+                    });
+                }
+            );
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                    if ( this._fuseSidebarService.getSidebar('navbar') )
+                    {
+                        this._fuseSidebarService.getSidebar('navbar').close();
+                    }
+                }
+            );
+
+        // Subscribe to the config changes
+        this._fuseConfigService.config
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((config) => {
+                this.fuseConfig = config;
+            });
+
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        if ( this.fusePerfectScrollbarUpdateTimeout )
+        {
+            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        }
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpened(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
+    }
+
+    /**
+     * Toggle sidebar folded status
+     */
+    toggleSidebarFolded(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+    }
+}
--- a/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts
+++ b/src/app/layout/components/navbar/vertical/style-1/style-1.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarVerticalStyle1Component } from 'app/layout/components/navbar/vertical/style-1/style-1.component';
+
+@NgModule({
+    declarations: [
+        NavbarVerticalStyle1Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarVerticalStyle1Component
+    ]
+})
+export class NavbarVerticalStyle1Module
+{
+}
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.html
@@ -0,0 +1,23 @@
+<div class="navbar-header">
+
+    <div class="logo">
+        <img class="logo-icon" src="assets/images/logos/fuse.svg">
+        <span class="logo-text">FUSE</span>
+    </div>
+
+    <button mat-icon-button class="toggle-sidebar-folded"
+            (click)="toggleSidebarFolded()" fxHide.lt-lg>
+        <mat-icon>menu</mat-icon>
+    </button>
+
+    <button mat-icon-button class="toggle-sidebar-opened"
+            (click)="toggleSidebarOpened()" fxHide.gt-md>
+        <mat-icon>arrow_back</mat-icon>
+    </button>
+
+</div>
+
+<div class="navbar-content" fusePerfectScrollbar
+     [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
+    <fuse-navigation layout="vertical"></fuse-navigation>
+</div>
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
@@ -0,0 +1,84 @@
+@import "src/@fuse/scss/fuse";
+
+fuse-sidebar {
+
+    &.navbar-fuse-sidebar {
+        overflow: hidden;
+
+        &.folded:not(.unfolded) {
+
+            navbar {
+
+                navbar-vertical-style-2 {
+
+                    .navbar-header {
+                        padding: 0 13px;
+
+                        .logo {
+
+                            .logo-text {
+                                opacity: 0;
+                                transition: opacity 200ms ease;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+navbar {
+
+    navbar-vertical-style-2 {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+
+        .navbar-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 64px;
+            min-height: 64px;
+            padding: 0 16px 0 24px;
+            transition: padding 200ms ease;
+            background-color: rgba(255, 255, 255, .05);
+            @include mat-elevation(1);
+
+            .logo {
+                display: flex;
+                align-items: center;
+
+                .logo-icon {
+                    width: 38px;
+                    height: 38px;
+                }
+
+                .logo-text {
+                    margin-left: 8px;
+                    font-size: 20px;
+                    font-weight: 300;
+                    letter-spacing: 0.4px;
+                }
+            }
+        }
+
+        .navbar-content {
+            flex: 1 1 auto;
+            overflow-y: auto;
+        }
+
+    }
+
+    &.right-navbar {
+
+        .toggle-sidebar-opened {
+
+            mat-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.ts
@@ -0,0 +1,156 @@
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { filter, take, takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
+import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
+
+@Component({
+    selector     : 'navbar-vertical-style-2',
+    templateUrl  : './style-2.component.html',
+    styleUrls    : ['./style-2.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class NavbarVerticalStyle2Component implements OnInit, OnDestroy
+{
+    fusePerfectScrollbarUpdateTimeout: any;
+    navigation: any;
+
+    // Private
+    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
+    private _unsubscribeAll: Subject<any>;
+
+    /**
+     * Constructor
+     *
+     * @param {FuseNavigationService} _fuseNavigationService
+     * @param {FuseSidebarService} _fuseSidebarService
+     * @param {Router} _router
+     */
+    constructor(
+        private _fuseNavigationService: FuseNavigationService,
+        private _fuseSidebarService: FuseSidebarService,
+        private _router: Router
+    )
+    {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    // Directive
+    @ViewChild(FusePerfectScrollbarDirective)
+    set directive(theDirective: FusePerfectScrollbarDirective)
+    {
+        if ( !theDirective )
+        {
+            return;
+        }
+
+        this._fusePerfectScrollbar = theDirective;
+
+        // Update the scrollbar on collapsable item toggle
+        this._fuseNavigationService.onItemCollapseToggled
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this._fusePerfectScrollbar.update();
+                }, 310);
+            });
+
+        // Scroll to the active item position
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                take(1)
+            )
+            .subscribe(() => {
+                    setTimeout(() => {
+                        const activeNavItem: any = document.querySelector('navbar .nav-link.active');
+
+                        if ( activeNavItem )
+                        {
+                            const activeItemOffsetTop       = activeNavItem.offsetTop,
+                                  activeItemOffsetParentTop = activeNavItem.offsetParent.offsetTop,
+                                  scrollDistance            = activeItemOffsetTop - activeItemOffsetParentTop - (48 * 3);
+
+                            this._fusePerfectScrollbar.scrollToTop(scrollDistance);
+                        }
+                    });
+                }
+            );
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        this._router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                    if ( this._fuseSidebarService.getSidebar('navbar') )
+                    {
+                        this._fuseSidebarService.getSidebar('navbar').close();
+                    }
+                }
+            );
+
+        // Get current navigation
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(
+                filter(value => value !== null),
+                takeUntil(this._unsubscribeAll)
+            )
+            .subscribe(() => {
+                this.navigation = this._fuseNavigationService.getCurrentNavigation();
+            });
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        if ( this.fusePerfectScrollbarUpdateTimeout )
+        {
+            clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        }
+
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Toggle sidebar opened status
+     */
+    toggleSidebarOpened(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleOpen();
+    }
+
+    /**
+     * Toggle sidebar folded status
+     */
+    toggleSidebarFolded(): void
+    {
+        this._fuseSidebarService.getSidebar('navbar').toggleFold();
+    }
+}
--- a/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts
+++ b/src/app/layout/components/navbar/vertical/style-2/style-2.module.ts
@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule } from '@angular/material';
+
+import { FuseNavigationModule } from '@fuse/components';
+import { FuseSharedModule } from '@fuse/shared.module';
+
+import { NavbarVerticalStyle2Component } from 'app/layout/components/navbar/vertical/style-2/style-2.component';
+
+@NgModule({
+    declarations: [
+        NavbarVerticalStyle2Component
+    ],
+    imports     : [
+        MatButtonModule,
+        MatIconModule,
+
+        FuseSharedModule,
+        FuseNavigationModule
+    ],
+    exports     : [
+        NavbarVerticalStyle2Component
+    ]
+})
+export class NavbarVerticalStyle2Module
+{
+}
--- a/src/app/layout/components/toolbar/toolbar.component.html
+++ b/src/app/layout/components/toolbar/toolbar.component.html
@@ -30,8 +30,8 @@
            <button mat-button [matMenuTriggerFor]="userMenu"
                    class="user-button">
                <div fxLayout="row" fxLayoutAlign="center center">
-                    <img class="avatar" src="assets/images/avatars/profile.jpg">
-                    <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
+                    <img class="avatar mr-0 mr-sm-16" src="assets/images/avatars/Velazquez.jpg">
+                    <span class="username mr-12" fxHide fxShow.gt-sm>Charlie Adams</span>
                    <mat-icon class="s-16" fxHide.xs>keyboard_arrow_down</mat-icon>
                </div>
            </button>
@@ -72,7 +72,7 @@

            <mat-menu #languageMenu="matMenu" [overlapTrigger]="false">

-                <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang.id)">
+                <button mat-menu-item *ngFor="let lang of languages" (click)="setLanguage(lang)">
                    <span fxLayout="row" fxLayoutAlign="start center">
                        <img class="flag mr-16" [src]="'assets/images/flags/'+lang.flag+'.png'">
                        <span class="iso">{{lang.title}}</span>
@@ -89,6 +89,15 @@

            <div class="toolbar-separator" fxHide fxShow.gt-xs></div>

+            <button mat-icon-button fxHide.gt-md
+                    class="chat-panel-toggle-button"
+                    (click)="toggleSidebarOpen('chatPanel')"
+                    aria-label="Toggle chat panel">
+                <mat-icon class="icon">chat</mat-icon>
+            </button>
+
+            <div class="toolbar-separator" fxHide.gt-md></div>
+
            <button mat-icon-button
                    class="quick-panel-toggle-button"
                    (click)="toggleSidebarOpen('quickPanel')"
--- a/src/app/layout/components/toolbar/toolbar.component.scss
+++ b/src/app/layout/components/toolbar/toolbar.component.scss
@@ -36,6 +36,7 @@
    .user-button,
    fuse-search-bar,
    .language-button,
+    .chat-panel-toggle-button,
    .quick-panel-toggle-button {
        min-width: 64px;
        height: 64px;
--- a/src/app/layout/components/toolbar/toolbar.component.ts
+++ b/src/app/layout/components/toolbar/toolbar.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, NavigationStart, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';

@@ -9,6 +8,7 @@ import { FuseConfigService } from '@fuse/services/config.service';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';

 import { navigation } from 'app/navigation/navigation';
+import { FuseLoadingBarService } from '@fuse/services/loading-bar.service';

@Component({
    selector   : 'toolbar',
@@ -34,14 +34,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
     * Constructor
     *
     * @param {FuseConfigService} _fuseConfigService
+     * @param {FuseLoadingBarService} _fuseLoadingBarService
     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
     * @param {TranslateService} _translateService
     */
    constructor(
        private _fuseConfigService: FuseConfigService,
+        private _fuseLoadingBarService: FuseLoadingBarService,
        private _fuseSidebarService: FuseSidebarService,
-        private _router: Router,
        private _translateService: TranslateService
    )
    {
@@ -102,22 +102,11 @@ export class ToolbarComponent implements OnInit, OnDestroy
     */
    ngOnInit(): void
    {
-        // Subscribe to the router events to show/hide the loading bar
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationStart),
-                takeUntil(this._unsubscribeAll)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = true;
-            });
-
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = false;
+        // Subscribe to the Fuse loading bar service
+        this._fuseLoadingBarService.visible
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((visible) => {
+                this.showLoadingBar = visible;
            });

        // Subscribe to the config changes
@@ -171,14 +160,14 @@ export class ToolbarComponent implements OnInit, OnDestroy
    /**
     * Set the language
     *
-     * @param langId
+     * @param lang
     */
-    setLanguage(langId): void
+    setLanguage(lang): void
    {
-        // Set the selected language for toolbar
-        this.selectedLanguage = _.find(this.languages, {'id': langId});
+        // Set the selected language for the toolbar
+        this.selectedLanguage = lang;

        // Use the selected language for translations
-        this._translateService.use(langId);
+        this._translateService.use(lang.id);
    }
 }
--- a/src/app/layout/horizontal/layout-1/layout-1.component.html
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above -->
@@ -55,8 +69,22 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -81,7 +109,7 @@

 <!-- TOP NAVBAR -->
 <ng-template #topNavbar>
-    <navbar layout="horizontal"
+    <navbar variant="horizontal-style-1"
            class="top-navbar" [ngClass]="fuseConfig.layout.navbar.background"
            fxHide fxShow.gt-md
            *ngIf="!fuseConfig.layout.navbar.hidden">
@@ -91,10 +119,11 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->
--- a/src/app/layout/horizontal/layout-1/layout-1.component.scss
+++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss
@@ -14,6 +14,7 @@ horizontal-layout-1 {
        width: 100%;
        height: 100%;
        z-index: 1;
+        min-width: 0;

        // Boxed
        &.boxed {
--- a/src/app/layout/horizontal/layout-1/layout-1.module.ts
+++ b/src/app/layout/horizontal/layout-1/layout-1.module.ts
@@ -4,6 +4,7 @@ import { MatSidenavModule } from '@angular/material';
 import { FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -23,6 +24,7 @@ import { HorizontalLayout1Component } from 'app/layout/horizontal/layout-1/layou
        FuseSidebarModule,
        FuseThemeOptionsModule,

+        ChatPanelModule,
        ContentModule,
        FooterModule,
        NavbarModule,
--- a/src/app/layout/vertical/layout-1/layout-1.component.html
+++ b/src/app/layout/vertical/layout-1/layout-1.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above -->
@@ -67,8 +81,22 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -93,22 +121,24 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->
--- a/src/app/layout/vertical/layout-1/layout-1.component.scss
+++ b/src/app/layout/vertical/layout-1/layout-1.component.scss
@@ -14,6 +14,7 @@ vertical-layout-1 {
        width: 100%;
        height: 100%;
        z-index: 1;
+        min-width: 0;

        // Boxed
        &.boxed {
--- a/src/app/layout/vertical/layout-1/layout-1.module.ts
+++ b/src/app/layout/vertical/layout-1/layout-1.module.ts
@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout1Component } from 'app/layout/vertical/layout-1/layout-1.
        FuseSharedModule,
        FuseSidebarModule,

+        ChatPanelModule,
        ContentModule,
        FooterModule,
        NavbarModule,
--- a/src/app/layout/vertical/layout-2/layout-2.component.html
+++ b/src/app/layout/vertical/layout-2/layout-2.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above fixed -->
@@ -67,8 +81,22 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -93,22 +121,24 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->
--- a/src/app/layout/vertical/layout-2/layout-2.component.scss
+++ b/src/app/layout/vertical/layout-2/layout-2.component.scss
@@ -14,6 +14,7 @@ vertical-layout-2 {
        width: 100%;
        height: 100%;
        z-index: 1;
+        min-width: 0;

        // Boxed
        &.boxed {
--- a/src/app/layout/vertical/layout-2/layout-2.module.ts
+++ b/src/app/layout/vertical/layout-2/layout-2.module.ts
@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components';
 import { FuseSharedModule } from '@fuse/shared.module';

+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout2Component } from 'app/layout/vertical/layout-2/layout-2.
        FuseSharedModule,
        FuseSidebarModule,

+        ChatPanelModule,
        ContentModule,
        FooterModule,
        NavbarModule,
--- a/src/app/layout/vertical/layout-3/layout-3.component.html
+++ b/src/app/layout/vertical/layout-3/layout-3.component.html
@@ -1,3 +1,17 @@
+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">

    <!-- TOOLBAR: Above fixed -->
@@ -53,8 +67,22 @@

 </div>

+<!-- SIDE PANEL -->
+<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
+
+    <!-- CHAT PANEL -->
+    <fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
+                  [folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
+                  lockedOpen="gt-md">
+        <chat-panel></chat-panel>
+    </fuse-sidebar>
+    <!-- / CHAT PANEL -->
+
+</ng-container>
+<!-- / SIDE PANEL -->
+
 <!-- QUICK PANEL -->
-<fuse-sidebar [name]="'quickPanel'" position="right" class="quick-panel">
+<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
    <quick-panel></quick-panel>
 </fuse-sidebar>
 <!-- / QUICK PANEL -->
@@ -79,22 +107,24 @@

 <!-- LEFT NAVBAR -->
 <ng-template #leftNavbar>
-    <fuse-sidebar [name]="'navbar'"
+    <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / LEFT NAVBAR -->

 <!-- RIGHT NAVBAR -->
 <ng-template #rightNavbar>
-    <fuse-sidebar [name]="'navbar'" position="right"
+    <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
                  [folded]="fuseConfig.layout.navbar.folded"
-                  [lockedOpen]="'gt-md'"
+                  lockedOpen="gt-md"
                  *ngIf="!fuseConfig.layout.navbar.hidden">
-        <navbar class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background" layout="vertical"></navbar>
+        <navbar [variant]="fuseConfig.layout.navbar.variant"
+                class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
    </fuse-sidebar>
 </ng-template>
 <!-- / RIGHT NAVBAR -->
--- a/src/app/layout/vertical/layout-3/layout-3.component.scss
+++ b/src/app/layout/vertical/layout-3/layout-3.component.scss
@@ -1,4 +1,4 @@
-@import "../../../../@fuse/scss/fuse";
+@import "src/@fuse/scss/fuse";

 vertical-layout-3 {
    display: flex;
@@ -14,6 +14,7 @@ vertical-layout-3 {
        width: 100%;
        height: 100%;
        z-index: 1;
+        min-width: 0;

        // Boxed
        &.boxed {
--- a/src/app/layout/vertical/layout-3/layout-3.module.ts
+++ b/src/app/layout/vertical/layout-3/layout-3.module.ts
@@ -4,6 +4,7 @@ import { RouterModule } from '@angular/router';
 import { FuseSidebarModule } from '@fuse/components/index';
 import { FuseSharedModule } from '@fuse/shared.module';

+import { ChatPanelModule } from 'app/layout/components/chat-panel/chat-panel.module';
 import { ContentModule } from 'app/layout/components/content/content.module';
 import { FooterModule } from 'app/layout/components/footer/footer.module';
 import { NavbarModule } from 'app/layout/components/navbar/navbar.module';
@@ -22,6 +23,7 @@ import { VerticalLayout3Component } from 'app/layout/vertical/layout-3/layout-3.
        FuseSharedModule,
        FuseSidebarModule,

+        ChatPanelModule,
        ContentModule,
        FooterModule,
        NavbarModule,
--- a/src/app/main/angular-material-elements/example-components.ts
+++ b/src/app/main/angular-material-elements/example-components.ts
@@ -95,8 +95,6 @@ import { TableHttpExample } from 'assets/angular-material-examples/table-http/ta
 import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
 import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
 import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
-import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
-import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
 import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
 import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
 import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
@@ -137,7 +135,6 @@ import { SliderFormattingExample } from 'assets/angular-material-examples/slider
 import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
 import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
 import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
-import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example';
 import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
 import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
 import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
@@ -146,6 +143,32 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami
 import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
 import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
 import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
+import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example';
+import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example';
+import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example';
+import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example';
+import { TabGroupCustomLabelExample } from 'assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example';
+import { TabGroupDynamicExample } from 'assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example';
+import { TabGroupDynamicHeightExample } from 'assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example';
+import { TabGroupHeaderBelowExample } from 'assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example';
+import { TabGroupLazyLoadedExample } from 'assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example';
+import { TabGroupStretchedExample } from 'assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example';
+import { TabGroupThemeExample } from 'assets/angular-material-examples/tab-group-theme/tab-group-theme-example';
+import { TabNavBarBasicExample } from 'assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example';
+import { TooltipAutoHideExample } from 'assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example';
+import { TooltipCustomClassExample } from 'assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example';
+import { TooltipDisabledExample } from 'assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example';
+import { TooltipMessageExample } from 'assets/angular-material-examples/tooltip-message/tooltip-message-example';
+import { TableBasicFlexExample } from 'assets/angular-material-examples/table-basic-flex/table-basic-flex-example';
+import { TableDynamicColumnsExample } from 'assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example';
+import { TableExpandableRowsExample } from 'assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example';
+import { TableMultipleHeaderFooterExample } from 'assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example';
+import { TableRowContextExample } from 'assets/angular-material-examples/table-row-context/table-row-context-example';
+import { TableStickyColumnsExample } from 'assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example';
+import { TableStickyComplexExample } from 'assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example';
+import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example';
+import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example';
+import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example';

 export const COMPONENT_MAP = {
    'autocomplete'    : [
@@ -176,6 +199,7 @@ export const COMPONENT_MAP = {
    ],
    // 'cdk-table'       : [
    //     'cdk-table-basic',
+    //     'cdk-table-basic-flex',
    //     'cdk-table-flat'
    // ],
    // 'cdk-tree'        : [
@@ -333,22 +357,40 @@ export const COMPONENT_MAP = {
    'stepper'         : [
        'stepper-overview',
        'stepper-editable',
-        'stepper-optional'
+        'stepper-optional',
+        'stepper-vertical'
    ],
    'table'           : [
        'table-overview',
        'table-basic',
+        'table-basic-flex',
+        'table-dynamic-columns',
+        'table-expandable-rows',
        'table-filtering',
        'table-footer-row',
        'table-http',
-        'table-native-only',
+        'table-multiple-header-footer',
        'table-pagination',
+        'table-row-context',
        'table-selection',
-        'table-sorting'
+        'table-sorting',
+        'table-sticky-columns',
+        'table-sticky-complex',
+        'table-sticky-complex-flex',
+        'table-sticky-header',
+        'table-sticky-footer',
    ],
    'tabs'            : [
-        'tabs-overview',
-        'tabs-template-label'
+        'tab-group-basic',
+        'tab-group-async',
+        'tab-group-custom-label',
+        'tab-group-dynamic',
+        'tab-group-dynamic-height',
+        'tab-group-header-below',
+        'tab-group-lazy-loaded',
+        'tab-group-stretched',
+        'tab-group-theme',
+        'tab-nav-bar-basic'
    ],
    'text-field'      : [
        'text-field-autofill-directive',
@@ -361,8 +403,12 @@ export const COMPONENT_MAP = {
    ],
    'tooltip'         : [
        'tooltip-overview',
+        'tooltip-auto-hide',
+        'tooltip-custom-class',
        'tooltip-delay',
+        'tooltip-disabled',
        'tooltip-manual',
+        'tooltip-message',
        'tooltip-modified-defaults',
        'tooltip-position'
    ],
@@ -438,6 +484,10 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Basic CDK data-table',
        component: CdkTableBasicExample
    },
+    'cdk-table-basic-flex'                 : {
+        title    : 'Basic use of `<cdk-table>` (uses display flex)',
+        component: CdkTableBasicFlexExample
+    },
    'cdk-tree-flat'                        : {
        title    : 'Tree with flat nodes',
        component: CdkTreeFlatExample
@@ -879,10 +929,26 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Stepper overview',
        component: StepperOverviewExample
    },
+    'stepper-vertical'                     : {
+        title    : 'Stepper vertical',
+        component: StepperVerticalExample
+    },
    'table-basic'                          : {
        title    : 'Basic table',
        component: TableBasicExample
    },
+    'table-basic-flex'                          : {
+        title    : 'Basic use of `<mat-table>` (uses display flex)',
+        component: TableBasicFlexExample
+    },
+    'table-dynamic-columns'                          : {
+        title    : 'Table dynamically changing the columns displayed',
+        component: TableDynamicColumnsExample
+    },
+    'table-expandable-rows'                          : {
+        title    : 'Table with expandable rows',
+        component: TableExpandableRowsExample
+    },
    'table-filtering'                      : {
        title    : 'Table with filtering',
        component: TableFilteringExample
@@ -895,9 +961,9 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Table retrieving data through HTTP',
        component: TableHttpExample
    },
-    'table-native-only'                    : {
-        title    : 'Native `<table>` that only applies the Material styles',
-        component: TableNativeOnlyExample
+    'table-multiple-header-footer'                           : {
+        title    : 'Table with multiple header and footer rows',
+        component: TableMultipleHeaderFooterExample
    },
    'table-overview'                       : {
        title    : 'Data table with sorting, pagination, and filtering.',
@@ -907,6 +973,10 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Table with pagination',
        component: TablePaginationExample
    },
+    'table-row-context'                     : {
+        title    : 'Table showing each row context properties',
+        component: TableRowContextExample
+    },
    'table-selection'                      : {
        title    : 'Table with selection',
        component: TableSelectionExample
@@ -915,13 +985,65 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Table with sorting',
        component: TableSortingExample
    },
-    'tabs-overview'                        : {
-        title    : 'Basic tabs',
-        component: TabsOverviewExample
+    'table-sticky-columns'                        : {
+        title    : 'Table with a sticky columns',
+        component: TableStickyColumnsExample
    },
-    'tabs-template-label'                  : {
-        title    : 'Complex Example',
-        component: TabsTemplateLabelExample
+    'table-sticky-complex'                        : {
+        title    : 'Tables with toggle-able sticky headers, footers, and columns',
+        component: TableStickyComplexExample
+    },
+    'table-sticky-complex-flex'                        : {
+        title    : 'Flex-layout tables with toggle-able sticky headers, footers, and columns',
+        component: TableStickyComplexFlexExample
+    },
+    'table-sticky-footer'                        : {
+        title    : 'Table with a sticky footer',
+        component: TableStickyFooterExample
+    },
+    'table-sticky-header'                        : {
+        title    : 'Table with sticky header',
+        component: TableStickyHeaderExample
+    },
+    'tab-group-basic'                      : {
+        title    : 'Basic use of the tab group',
+        component: TabGroupBasicExample
+    },
+    'tab-group-async'                      : {
+        title    : 'Tab group with asynchronously loading tab contents',
+        component: TabGroupAsyncExample
+    },
+    'tab-group-custom-label'               : {
+        title    : 'Using tabs with a custom label template',
+        component: TabGroupCustomLabelExample
+    },
+    'tab-group-dynamic'                    : {
+        title    : 'Tab group with dynamically changing tabs',
+        component: TabGroupDynamicExample
+    },
+    'tab-group-dynamic-height'             : {
+        title    : 'Tab group with dynamic height based on tab contents',
+        component: TabGroupDynamicHeightExample
+    },
+    'tab-group-header-below'               : {
+        title    : 'Tab group with the headers on the bottom',
+        component: TabGroupHeaderBelowExample
+    },
+    'tab-group-lazy-loaded'                : {
+        title    : 'Tab group where the tab content is loaded lazily (when activated)',
+        component: TabGroupLazyLoadedExample
+    },
+    'tab-group-stretched'                  : {
+        title    : 'Tab group with stretched labels',
+        component: TabGroupStretchedExample
+    },
+    'tab-group-theme'                      : {
+        title    : 'Customizing the theme options on the tab group',
+        component: TabGroupThemeExample
+    },
+    'tab-nav-bar-basic'                    : {
+        title    : 'Basic use of the tab nav bar',
+        component: TabNavBarBasicExample
    },
    'text-field-autofill-directive'        : {
        title    : 'Monitoring autofill state with cdkAutofill',
@@ -943,14 +1065,30 @@ export const EXAMPLE_COMPONENTS = {
        title    : 'Basic toolbar',
        component: ToolbarOverviewExample
    },
+    'tooltip-auto-hide'                        : {
+        title    : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container',
+        component: TooltipAutoHideExample
+    },
+    'tooltip-custom-class'                        : {
+        title    : 'Tooltip that can have a custom class applied',
+        component: TooltipCustomClassExample
+    },
    'tooltip-delay'                        : {
        title    : 'Tooltip with a show and hide delay',
        component: TooltipDelayExample
    },
+    'tooltip-disabled'                        : {
+        title    : 'Tooltip that can be disabled',
+        component: TooltipDisabledExample
+    },
    'tooltip-manual'                       : {
-        title    : 'Tooltip that can be manually shown/hidden.',
+        title    : 'Tooltip that can be manually shown/hidden',
        component: TooltipManualExample
    },
+    'tooltip-message'                       : {
+        title    : 'Tooltip with a changing message',
+        component: TooltipMessageExample
+    },
    'tooltip-modified-defaults'            : {
        title    : 'Tooltip with a show and hide delay',
        component: TooltipModifiedDefaultsExample
@@ -1001,6 +1139,7 @@ export const EXAMPLE_LIST = [
    CardFancyExample,
    CardOverviewExample,
    CdkTableBasicExample,
+    CdkTableBasicFlexExample,
    CdkTreeFlatExample,
    CdkTreeNestedExample,
    CheckboxConfigurableExample,
@@ -1108,24 +1247,47 @@ export const EXAMPLE_LIST = [
    StepperEditableExample,
    StepperOptionalExample,
    StepperOverviewExample,
+    StepperVerticalExample,
    TableBasicExample,
+    TableBasicFlexExample,
+    TableDynamicColumnsExample,
+    TableExpandableRowsExample,
    TableFilteringExample,
    TableFooterRowExample,
    TableHttpExample,
-    TableNativeOnlyExample,
+    TableMultipleHeaderFooterExample,
    TableOverviewExample,
    TablePaginationExample,
+    TableRowContextExample,
    TableSelectionExample,
    TableSortingExample,
-    TabsOverviewExample,
-    TabsTemplateLabelExample,
+    TableStickyColumnsExample,
+    TableStickyComplexExample,
+    TableStickyComplexFlexExample,
+    TableStickyFooterExample,
+    TableStickyHeaderExample,
+    TabGroupBasicExample,
+    TabGroupAsyncExample,
+    TabGroupCustomLabelExample,
+    TabGroupDynamicExample,
+    TabGroupDynamicHeightExample,
+    TabGroupHeaderBelowExample,
+    TabGroupLazyLoadedExample,
+    TabGroupStretchedExample,
+    TabGroupStretchedExample,
+    TabGroupThemeExample,
+    TabNavBarBasicExample,
    TextFieldAutofillDirectiveExample,
    TextFieldAutofillMonitorExample,
    TextFieldAutosizeTextareaExample,
    ToolbarMultirowExample,
    ToolbarOverviewExample,
+    TooltipAutoHideExample,
+    TooltipCustomClassExample,
    TooltipDelayExample,
+    TooltipDisabledExample,
    TooltipManualExample,
+    TooltipMessageExample,
    TooltipModifiedDefaultsExample,
    TooltipOverviewExample,
    TooltipPositionExample,
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
+++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
@@ -1,4 +1,4 @@
-@import "../../../../@fuse/scss/fuse";
+@import "src/@fuse/scss/fuse";

 example-viewer {
    display: block;
--- a/src/app/main/apps/chat/chat.service.ts
+++ b/src/app/main/apps/chat/chat.service.ts
@@ -74,9 +74,7 @@ export class ChatService implements Resolve<any>
            return item.contactId === contactId;
        });

-        /**
-         * Create new chat, if it's not created yet.
-         */
+        // Create new chat, if it's not created yet.
        if ( !chatItem )
        {
            this.createNewChat(contactId).then((newChats) => {
@@ -137,26 +135,18 @@ export class ChatService implements Resolve<any>
                unread         : null
            };

-            /**
-             * Add new chat list item to the user's chat list
-             */
+            // Add new chat list item to the user's chat list
            this.user.chatList.push(chatListItem);

-            /**
-             * Post the created chat
-             */
+            // Post the created chat
            this._httpClient.post('api/chat-chats', {...chat})
                .subscribe((response: any) => {

-                    /**
-                     * Post the new the user data
-                     */
+                    // Post the new the user data
                    this._httpClient.post('api/chat-user/' + this.user.id, this.user)
                        .subscribe(newUserData => {

-                            /**
-                             * Update the user data from server
-                             */
+                            // Update the user data from server
                            this.getUser().then(updatedUser => {
                                this.onUserUpdated.next(updatedUser);
                                resolve(updatedUser);
--- a/src/app/main/apps/contacts/contact-list/contact-list.component.html
+++ b/src/app/main/apps/contacts/contact-list/contact-list.component.html
@@ -1,9 +1,9 @@
 <mat-table #table [dataSource]="dataSource"
           [@animateStagger]="{value:'50'}">
    <!-- Checkbox Column -->
-    <ng-container cdkColumnDef="checkbox">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="checkbox">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
            <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
                          (click)="$event.stopPropagation()">
            </mat-checkbox>
@@ -11,26 +11,26 @@
    </ng-container>

    <!-- Avatar Column -->
-    <ng-container cdkColumnDef="avatar">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="avatar">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
            <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                 [src]="contact.avatar"/>
        </mat-cell>
    </ng-container>

    <!-- Name Column -->
-    <ng-container cdkColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let contact">
            <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
        </mat-cell>
    </ng-container>

    <!-- Email Column -->
-    <ng-container cdkColumnDef="email">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+    <ng-container matColumnDef="email">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
            <p class="email text-truncate">
                {{contact.email}}
            </p>
@@ -38,9 +38,9 @@
    </ng-container>

    <!-- Phone Column -->
-    <ng-container cdkColumnDef="phone">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+    <ng-container matColumnDef="phone">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
            <p class="phone text-truncate">
                {{contact.phone}}
            </p>
@@ -48,9 +48,9 @@
    </ng-container>

    <!-- Job Title Column -->
-    <ng-container cdkColumnDef="jobTitle">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+    <ng-container matColumnDef="jobTitle">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="job-title text-truncate">
                {{contact.jobTitle}}
            </p>
@@ -58,9 +58,9 @@
    </ng-container>

    <!-- Company Column -->
-    <ng-container cdkColumnDef="company">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+    <ng-container matColumnDef="company">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
+        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
            <p class="company text-truncate">
                {{contact.company}}
            </p>
@@ -68,9 +68,9 @@
    </ng-container>

    <!-- Buttons Column -->
-    <ng-container cdkColumnDef="buttons">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+    <ng-container matColumnDef="buttons">
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-cell *matCellDef="let contact">
            <div fxFlex="row" fxLayoutAlign="end center">
                <button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
                    <mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
@@ -93,8 +93,8 @@
        </mat-cell>
    </ng-container>

-    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let contact; columns: displayedColumns;"
             class="contact"
             (click)="editContact(contact)"
             [ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"
--- a/src/app/main/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/apps/contacts/contact-list/contact-list.component.scss
@@ -50,4 +50,10 @@ contacts-contact-list {
    right: 12px;
    padding: 0;
    z-index: 99;
+
+    @include media-breakpoint-down('xs') {
+        position: sticky;
+        top: calc(100vh - 72px);
+        bottom: auto;
+    }
 }
--- a/src/app/main/apps/contacts/contacts.module.ts
+++ b/src/app/main/apps/contacts/contacts.module.ts
@@ -1,7 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
-
 import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material';

 import { FuseSharedModule } from '@fuse/shared.module';
@@ -34,7 +32,6 @@ const routes: Routes = [
    ],
    imports        : [
        RouterModule.forChild(routes),
-        CdkTableModule,

        MatButtonModule,
        MatCheckboxModule,
--- a/src/app/main/apps/dashboards/project/project.component.html
+++ b/src/app/main/apps/dashboards/project/project.component.html
@@ -816,28 +816,28 @@
                                <mat-table #table [dataSource]="widget11.dataSource">

                                    <!-- Avatar Column -->
-                                    <ng-container cdkColumnDef="avatar">
-                                        <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
-                                        <mat-cell fxFlex="96px" *cdkCellDef="let contact">
+                                    <ng-container matColumnDef="avatar">
+                                        <mat-header-cell fxFlex="96px" *matHeaderCellDef></mat-header-cell>
+                                        <mat-cell fxFlex="96px" *matCellDef="let contact">
                                            <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
                                                 [src]="contact.avatar"/>
                                        </mat-cell>
                                    </ng-container>

                                    <!-- Name Column -->
-                                    <ng-container cdkColumnDef="name">
-                                        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact">
+                                    <ng-container matColumnDef="name">
+                                        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+                                        <mat-cell *matCellDef="let contact">
                                            <p class="text-truncate font-weight-600">{{contact.name}}
                                                {{contact.lastName}}</p>
                                        </mat-cell>
                                    </ng-container>

                                    <!-- Position Column -->
-                                    <ng-container cdkColumnDef="position">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position
+                                    <ng-container matColumnDef="position">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Position
                                        </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
                                            <p class="position text-truncate">
                                                {{contact.position}}
                                            </p>
@@ -845,10 +845,10 @@
                                    </ng-container>

                                    <!-- Office Column -->
-                                    <ng-container cdkColumnDef="office">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office
+                                    <ng-container matColumnDef="office">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Office
                                        </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
                                            <p class="office text-truncate">
                                                {{contact.office}}
                                            </p>
@@ -856,10 +856,10 @@
                                    </ng-container>

                                    <!-- Email Column -->
-                                    <ng-container cdkColumnDef="email">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email
+                                    <ng-container matColumnDef="email">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email
                                        </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
                                            <p class="email text-truncate">
                                                {{contact.email}}
                                            </p>
@@ -867,10 +867,10 @@
                                    </ng-container>

                                    <!-- Phone Column -->
-                                    <ng-container cdkColumnDef="phone">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone
+                                    <ng-container matColumnDef="phone">
+                                        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone
                                        </mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md>
+                                        <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
                                            <p class="phone text-truncate">
                                                {{contact.phone}}
                                            </p>
@@ -878,8 +878,8 @@
                                    </ng-container>

                                    <mat-header-row
-                                        *cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
-                                    <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
+                                        *matHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
+                                    <mat-row *matRowDef="let contact; columns: widgets.widget11.table.columns;">
                                    </mat-row>
                                </mat-table>
                            </div>
--- a/src/app/main/apps/dashboards/project/project.module.ts
+++ b/src/app/main/apps/dashboards/project/project.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material';
 import { NgxChartsModule } from '@swimlane/ngx-charts';

@@ -28,7 +27,6 @@ const routes: Routes = [
    imports     : [
        RouterModule.forChild(routes),

-        CdkTableModule,
        MatButtonModule,
        MatDividerModule,
        MatFormFieldModule,
--- a/src/app/main/apps/e-commerce/e-commerce.module.ts
+++ b/src/app/main/apps/e-commerce/e-commerce.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { AgmCoreModule } from '@agm/core';
@@ -75,7 +74,6 @@ const routes: Routes = [
    imports     : [
        RouterModule.forChild(routes),

-        CdkTableModule,
        MatButtonModule,
        MatChipsModule,
        MatFormFieldModule,
--- a/src/app/main/apps/e-commerce/orders/orders.component.html
+++ b/src/app/main/apps/e-commerce/orders/orders.component.html
@@ -46,25 +46,25 @@
                       fusePerfectScrollbar>

                <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="id">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                        <p class="text-truncate">{{order.id}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Reference Column -->
-                <ng-container cdkColumnDef="reference">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="reference">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                        <p class="text-truncate">{{order.reference}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Name Column -->
-                <ng-container cdkColumnDef="customer">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Customer</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="customer">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                        <p class="text-truncate">
                            {{order.customer.firstName}}
                            {{order.customer.lastName}}
@@ -73,9 +73,9 @@
                </ng-container>

                <!-- Total Price Column -->
-                <ng-container cdkColumnDef="total">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
+                <ng-container matColumnDef="total">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
                        <p class="total-price text-truncate">
                            {{order.total | currency:'USD':'symbol'}}
                        </p>
@@ -83,9 +83,9 @@
                </ng-container>

                <!-- Payment Column -->
-                <ng-container cdkColumnDef="payment">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="payment">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{order.payment.method}}
                        </p>
@@ -93,9 +93,9 @@
                </ng-container>

                <!-- Status Column -->
-                <ng-container cdkColumnDef="status">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Status</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                <ng-container matColumnDef="status">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
+                    <mat-cell *matCellDef="let order">
                        <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
                            {{order.status[0].name}}
                        </p>
@@ -103,18 +103,18 @@
                </ng-container>

                <!-- Date Column -->
-                <ng-container cdkColumnDef="date">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="date">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+                    <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
                        <p class="text-truncate">
                            {{order.date}}
                        </p>
                    </mat-cell>
                </ng-container>

-                <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

-                <mat-row *cdkRowDef="let order; columns: displayedColumns;"
+                <mat-row *matRowDef="let order; columns: displayedColumns;"
                         class="order"
                         matRipple
                         [routerLink]="'/apps/e-commerce/orders/'+order.id">
--- a/src/app/main/apps/e-commerce/orders/orders.component.scss
+++ b/src/app/main/apps/e-commerce/orders/orders.component.scss
@@ -2,23 +2,29 @@

 :host {

-    .header {
+    #orders {

-        .search-input-wrapper {
-            max-width: 480px;
-        }
+        > .center {

-        @include media-breakpoint-down(xs) {
-            margin: 24px 0;
-            height: 128px !important;
-            min-height: 128px !important;
-            max-height: 128px !important;
+            > .header {
+
+                .search-input-wrapper {
+                    max-width: 480px;
+                }
+
+                @include media-breakpoint-down(xs) {
+                    margin: 24px 0;
+                    height: 128px !important;
+                    min-height: 128px !important;
+                    max-height: 128px !important;
+                }
+            }
        }
    }

    .mat-tab-group,
    .mat-tab-body-wrapper,
-    .tab-content{
+    .tab-content {
        flex: 1 1 auto;
        max-width: 100%;
    }
--- a/src/app/main/apps/e-commerce/products/products.component.html
+++ b/src/app/main/apps/e-commerce/products/products.component.html
@@ -55,17 +55,17 @@
                       fusePerfectScrollbar>

                <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="id">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.id}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Image Column -->
-                <ng-container cdkColumnDef="image">
-                    <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="image">
+                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                        <img class="product-image"
                             *ngIf="product.images[0]" [alt]="product.name"
                             [src]="product.images[0].url"/>
@@ -74,17 +74,17 @@
                </ng-container>

                <!-- Name Column -->
-                <ng-container cdkColumnDef="name">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Name</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                <ng-container matColumnDef="name">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
+                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.name}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Category Column -->
-                <ng-container cdkColumnDef="category">
-                    <mat-header-cell *cdkHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-md>
+                <ng-container matColumnDef="category">
+                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
                        <p class="category text-truncate">
                            {{product.categories[0]}}
                        </p>
@@ -92,9 +92,9 @@
                </ng-container>

                <!-- Price Column -->
-                <ng-container cdkColumnDef="price">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                <ng-container matColumnDef="price">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                        <p class="price text-truncate">
                            {{product.priceTaxIncl | currency:'USD':'symbol'}}
                        </p>
@@ -102,9 +102,9 @@
                </ng-container>

                <!-- Quantity Column -->
-                <ng-container cdkColumnDef="quantity">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-sm>
+                <ng-container matColumnDef="quantity">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-sm>

                        <span class="quantity-indicator text-truncate"
                              [ngClass]="{'mat-red-500-bg':product.quantity <= 5, 'mat-amber-500-bg':product.quantity > 5 && product.quantity <= 25,'mat-green-600-bg':product.quantity > 25}">
@@ -117,17 +117,17 @@
                </ng-container>

                <!-- Active Column -->
-                <ng-container cdkColumnDef="active">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                <ng-container matColumnDef="active">
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
+                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                        <mat-icon *ngIf="product.active" class="active-icon mat-green-600-bg s-16">check</mat-icon>
                        <mat-icon *ngIf="!product.active" class="active-icon mat-red-500-bg s-16">close</mat-icon>
                    </mat-cell>
                </ng-container>

-                <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

-                <mat-row *cdkRowDef="let product; columns: displayedColumns;"
+                <mat-row *matRowDef="let product; columns: displayedColumns;"
                         class="product"
                         matRipple
                         [routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">
--- a/src/app/main/apps/e-commerce/products/products.component.scss
+++ b/src/app/main/apps/e-commerce/products/products.component.scss
@@ -2,23 +2,29 @@

 :host {

-    .header {
+    #products {

-        .search-input-wrapper {
-            max-width: 480px;
+        .top-bg {
+            @include media-breakpoint-down(xs) {
+                height: 240px;
+            }
        }

-        @include media-breakpoint-down(xs) {
-            margin: 8px 0;
-            height: 192px !important;
-            min-height: 192px !important;
-            max-height: 192px !important;
-        }
-    }
+        > .center {

-    .top-bg {
-        @include media-breakpoint-down(xs) {
-            height: 240px;
+            > .header {
+
+                .search-input-wrapper {
+                    max-width: 480px;
+                }
+
+                @include media-breakpoint-down(xs) {
+                    margin: 8px 0;
+                    height: 192px !important;
+                    min-height: 192px !important;
+                    max-height: 192px !important;
+                }
+            }
        }
    }

--- a/src/app/main/apps/file-manager/file-list/file-list.component.html
+++ b/src/app/main/apps/file-manager/file-list/file-list.component.html
@@ -1,47 +1,47 @@
 <mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">

    <!-- Type Column -->
-    <ng-container cdkColumnDef="icon">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="64px">
+    <ng-container matColumnDef="icon">
+        <mat-header-cell *matHeaderCellDef fxFlex="64px"></mat-header-cell>
+        <mat-cell *matCellDef="let row" fxFlex="64px">
            <mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
        </mat-cell>
    </ng-container>

    <!-- Name Column -->
-    <ng-container cdkColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
+    <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
    </ng-container>

    <!-- Type Column -->
-    <ng-container cdkColumnDef="type">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
+    <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
    </ng-container>

    <!-- Owner Column -->
-    <ng-container cdkColumnDef="owner">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
+    <ng-container matColumnDef="owner">
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Owner</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
    </ng-container>

    <!-- Size Column -->
-    <ng-container cdkColumnDef="size">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
+    <ng-container matColumnDef="size">
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Size</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
    </ng-container>

    <!-- Modified Column -->
-    <ng-container cdkColumnDef="modified">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
+    <ng-container matColumnDef="modified">
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
    </ng-container>

    <!-- Detail Button Column -->
-    <ng-container cdkColumnDef="detail-button">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
+    <ng-container matColumnDef="detail-button">
+        <mat-header-cell *matHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
+        <mat-cell *matCellDef="let row" fxFlex="48px" fxHide.gt-md>
            <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
                    (click)="toggleSidebar('file-manager-details-sidebar')">
                <mat-icon class="secondary-text">info</mat-icon>
@@ -49,8 +49,8 @@
        </mat-cell>
    </ng-container>

-    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let row; columns: displayedColumns;"
+    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+    <mat-row *matRowDef="let row; columns: displayedColumns;"
             (click)="onSelect(row)"
             [ngClass]="{'mat-accent-50-bg':row == selected}"
             matRipple [@animate]="{value:'*',params:{y:'100%'}}"
--- a/src/app/main/apps/file-manager/file-manager.module.ts
+++ b/src/app/main/apps/file-manager/file-manager.module.ts
@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { CdkTableModule } from '@angular/cdk/table';
 import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material';

 import { FuseSharedModule } from '@fuse/shared.module';
@@ -33,7 +32,6 @@ const routes: Routes = [
    imports     : [
        RouterModule.forChild(routes),

-        CdkTableModule,
        MatButtonModule,
        MatIconModule,
        MatRippleModule,
--- a/src/app/main/apps/scrumboard/board/list/card/card.component.scss
+++ b/src/app/main/apps/scrumboard/board/list/card/card.component.scss
@@ -58,7 +58,7 @@
                }

                &.due-date {
-                    background-color: mat-color(mat-palette($mat-green));;
+                    background-color: mat-color(mat-palette($mat-green));

                    &.overdue {
                        background-color: mat-color(mat-palette($mat-red));
--- a/src/app/main/documentation/changelog/changelog.component.html
+++ b/src/app/main/documentation/changelog/changelog.component.html
@@ -19,6 +19,180 @@

        <div class="changelog">

+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.3 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.3</span>
+                    <span class="date">(2018-07-13)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Navbar) Doesn't scroll on Firefox, IE & Edge</li>
+                            <li>(Navbar) IE11 style fixes</li>
+                            <li>(Chat Panel) IE11 style fixes</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Chat Panel) Style and logic tweaks</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.2 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.2</span>
+                    <span class="date">(2018-07-12)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>Added the missing 'is-mobile' check back to the AppComponent</li>
+                            <li>Scrollbar styles are being modified in some mobile devices</li>
+                            <li>(Chat Panel) Mobile scrolling and layout issues</li>
+                            <li>
+                                (Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
+                                prevent style leak
+                            </li>
+                            <li>(Toolbar) Removed unnecessary chat panel toggle method</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>(Skeleton) Removed chat panel from skeleton as it's more like an app</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.1 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.1</span>
+                    <span class="date">(2018-07-12)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>
+                                (Layout) Added SidePanel position to the layout for controlling Chat Panel and possible
+                                other panels
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>(Chat Panel) Mobile width issues</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>Removed chat panel from auth pages using layout options</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.2.0 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.2.0</span>
+                    <span class="date">(2018-07-11)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="new">
+                        <span class="title">New</span>
+                        <ul>
+                            <li>Updated Angular to 6.0.7</li>
+                            <li>Updated Angular Material to 6.3.3</li>
+                            <li>Updated various other packages</li>
+                            <li>Updated Angular material examples</li>
+                            <li>New Chat Panel sidebar</li>
+                            <li>(Navbar) New style variants for the Navbar</li>
+                            <li>(FuseSidebar) Added 'foldedChanged' & 'openedChanged' outputs</li>
+                            <li>(FuseNavigation) Ability to add custom classes to the navigation items</li>
+                            <li>(FuseLoadingBarService) New service for showing/hiding the loading bar easily</li>
+                        </ul>
+                    </div>
+
+                    <div class="improved">
+                        <span class="title">Improved</span>
+                        <ul>
+                            <li>Replaced cdkTable with matTable since Table is now a proper component in Material</li>
+                            <li>(E-Commerce) Added sticky headers to the tables</li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <!-- @ v6.1.1 -->
+            <!-- --------------------------------------------------------------------------------------------- -->
+            <div class="entry">
+
+                <div class="title">
+                    <span class="version">v6.1.1</span>
+                    <span class="date">(2018-06-17)</span>
+                </div>
+
+                <div class="groups">
+
+                    <div class="fixed">
+                        <span class="title">Fixed</span>
+                        <ul>
+                            <li>
+                                (Fuse Sidebar) Folded status doesn't work correctly when there are multiple instances
+                            </li>
+                        </ul>
+                    </div>
+
+                </div>
+
+            </div>
+
+
            <!-- --------------------------------------------------------------------------------------------- -->
            <!-- @ v6.1.0 -->
            <!-- --------------------------------------------------------------------------------------------- -->
@@ -26,7 +200,7 @@

                <div class="title">
                    <span class="version">v6.1.0</span>
-                    <span class="date">(2018-06-xx)</span>
+                    <span class="date">(2018-06-16)</span>
                </div>

                <div class="groups">
@@ -36,6 +210,7 @@
                        <ul>
                            <li>New layout system and layouts</li>
                            <li>Replaced all mat-sidenav components with fuse-sidebar on apps and pages</li>
+                            <li>Navigation item type 'collapse' renamed to 'collapsable'</li>
                        </ul>
                    </div>

--- a/src/app/main/documentation/components/sidebar/sidebar.component.html
+++ b/src/app/main/documentation/components/sidebar/sidebar.component.html
@@ -27,13 +27,13 @@
        <p class="py-8">
            <fuse-highlight lang="html">
                <textarea #source>
-                    <fuse-sidebar [name]="'navbar'" [folded]="someSetting.isFolded" [lockedOpen]="'gt-md'"></fuse-sidebar>
+                    <fuse-sidebar name="navbar" [folded]="someSetting.isFolded" lockedOpen="gt-md"></fuse-sidebar>
                </textarea>
            </fuse-highlight>
        </p>

        <div class="my-48">
-            <h2>[name]</h2>
+            <h3><code>[name]</code></h3>
            <p class="py-8">
                <b>name</b> attribute allows you to set a unique name to the sidebar. It's required for sidebar to
                work correctly, as every sidebar being registered to the sidebar service.
@@ -41,14 +41,21 @@
        </div>

        <div class="my-48">
-            <h2>[folded]</h2>
+            <h3><code>[folded]</code></h3>
            <p class="py-8">
                Controls the folded status of the sidebar.
            </p>
        </div>

        <div class="my-48">
-            <h2>[position]</h2>
+            <h3><code>[foldedWidth]</code></h3>
+            <p class="py-8">
+                Controls the width of the sidebar when it's folded.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3><code>[position]</code></h3>
            <p class="py-8">
                Controls the position of the sidebar when it's hidden. This doesn't affect on the locked-open placement
                of the sidebar, it only controls which side the sidebar is going to slide in when it's completely
@@ -57,13 +64,27 @@
        </div>

        <div class="my-48">
-            <h2>[lockedOpen]</h2>
+            <h3><code>[lockedOpen]</code></h3>
            <p class="py-8">
                Accepts Angular Material breakpoint aliases ('gt-md', 'lg' etc.) and locks open the sidebar if the
                alias matches the current breakpoint, similar to how Angular Material 1.x sidenav works.
            </p>
        </div>

+        <div class="my-48">
+            <h3><code>(onFoldedChanged)</code></h3>
+            <p class="py-8">
+                <b>onFoldedChanged</b> event will be triggered when the sidebar folded or unfolded permanently.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h3><code>(onOpenedChanged)</code></h3>
+            <p class="py-8">
+                <b>onOpenedChanged</b> event will be triggered when the sidebar opened or closed.
+            </p>
+        </div>
+
        <div class="section-title">Sidebar Service</div>
        <p class="py-8">
            The sidebar service allows you to control the Sidebar's states from anywhere. To access the sidebar,
--- a/src/app/main/documentation/services/config/config.component.ts
+++ b/src/app/main/documentation/services/config/config.component.ts
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector   : 'config-service-docs',
-    templateUrl: './config.component.html',
-    styleUrls  : ['./config.component.scss']
-})
-export class ConfigServiceDocsComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-
-    }
-}
--- a/src/app/main/documentation/services/fuse-config/fuse-config.component.html
+++ b/src/app/main/documentation/services/fuse-config/fuse-config.component.html
@@ -1,4 +1,4 @@
-<div id="config" class="page-layout simple fullwidth docs">
+<div id="fuse-config" class="page-layout simple fullwidth docs">

    <!-- HEADER -->
    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@@ -10,7 +10,7 @@
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Services</span>
            </div>
-            <div class="h2 mt-16">Config</div>
+            <div class="h2 mt-16">Fuse Config</div>
        </div>
    </div>
    <!-- / HEADER -->
--- a/src/app/main/documentation/services/fuse-config/fuse-config.component.scss
+++ b/src/app/main/documentation/services/fuse-config/fuse-config.component.scss
--- a/src/app/main/documentation/services/fuse-config/fuse-config.component.ts
+++ b/src/app/main/documentation/services/fuse-config/fuse-config.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-config-service-docs',
+    templateUrl: './fuse-config.component.html',
+    styleUrls  : ['./fuse-config.component.scss']
+})
+export class FuseConfigServiceDocsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html
+++ b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.html
@@ -0,0 +1,66 @@
+<div id="fuse-loading-bar" class="page-layout simple fullwidth docs">
+
+    <!-- HEADER -->
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <mat-icon class="secondary-text s-18">home</mat-icon>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Documentation</span>
+                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
+                <span class="secondary-text">Services</span>
+            </div>
+            <div class="h2 mt-16">Fuse Loading Bar</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content p-24">
+
+        <p>
+            <code>Loading bar</code> is a custom Fuse service that allows to have a control on the loading bar that is
+            placed in the Toolbar by default.
+        </p>
+
+        <div class="section-title">Usage</div>
+        <p class="mat-grey-200-bg py-8">
+
+            <fuse-highlight lang="typescript">
+                <textarea #source>
+
+                    export class SomeComponent implements OnInit
+                    {
+                        constructor(
+                            private _fuseLoadingBarService: FuseLoadingBarService
+                        ) {}
+
+                        ngOnInit()
+                        {
+                            // Subscribe to the Fuse loading bar service
+                            this._fuseLoadingBarService.visible
+                                .subscribe((visible) => {
+                                    this.showLoadingBar = visible;
+                            });
+                        }
+
+                        showLoadingBar()
+                        {
+                            this._fuseLoadingBarService.showLoadingBar();
+                        }
+
+                        hideLoadingBar()
+                        {
+                            this._fuseLoadingBarService.hideLoadingBar();
+                        }
+                    }
+
+                </textarea>
+            </fuse-highlight>
+
+        </p>
+
+    </div>
+
+</div>
+
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
+++ b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.scss
--- a/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts
+++ b/src/app/main/documentation/services/fuse-loading-bar/fuse-loading-bar.component.ts
@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-loading-bar-service-docs',
+    templateUrl: './fuse-loading-bar.component.html',
+    styleUrls  : ['./fuse-loading-bar.component.scss']
+})
+export class FuseLoadingBarServiceDocsComponent
+{
+    /**
+     * Constructor
+     */
+    constructor()
+    {
+
+    }
+}
--- a/src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.html
+++ b/src/app/main/documentation/services/fuse-splash-screen/fuse-splash-screen.component.html
@@ -10,7 +10,7 @@
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Services</span>
            </div>
-            <div class="h2 mt-16">Splash Screen</div>
+            <div class="h2 mt-16">Fuse Splash Screen</div>
        </div>
    </div>
    <!-- / HEADER -->
@@ -28,13 +28,13 @@
            <fuse-highlight lang="typescript">
                <textarea #source>

-                    export class SomeComponent
+                    export class SomeComponent implements OnInit
                    {
                        constructor(
                            private _fuseSplashScreenService: FuseSplashScreenService
                        ) {}

-                        onInit()
+                        ngOnInit()
                        {
                            this._fuseSplashScreenService.show();

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	b2ceb02709	Updated changelog and nav badge	2018-07-12 17:49:16 +03:00
Sercan Yemen	ffbd000fe2	(Chat Panel) Style and logic tweaks	2018-07-12 17:45:46 +03:00
Sercan Yemen	b6ebd2b839	(Navbar) Fixed: IE11 issues (Chat Panel) Fixed: IE11 issues	2018-07-12 16:04:56 +03:00
Sercan Yemen	4d4d52ba05	(Navbar) Fixed: Style variant 2 doesn't scroll on Firefox, IE & Edge (Chat Panel) Fixed: Doesn't scroll on Firefox, IE & Edge Increased Fuse version	2018-07-12 15:48:55 +03:00
Sercan Yemen	251732f221	Updated changelog	2018-07-12 13:59:51 +03:00
Sercan Yemen	1c34a65034	Increased Fuse version	2018-07-12 13:30:17 +03:00
Sercan Yemen	b8803a055f	Removed side panel from auth pages Updated the changelog Theme options button adjustments	2018-07-12 13:27:26 +03:00
Sercan Yemen	6b8cd41d5e	Added SidePanel to the layouts for controlling the chat bar and possible other bar properties via FuseConfig	2018-07-12 13:19:34 +03:00
Sercan Yemen	2c7ef4de00	Updated Fuse version and changelog	2018-07-12 11:38:02 +03:00
Sercan Yemen	fdb572fadd	(Toolbar) Removed unnecessary chat panel toggle method	2018-07-12 11:13:09 +03:00
Sercan Yemen	528c3f95e7	(Navbar) Fixed: Navbar doesn't grow if it has a small content	2018-07-12 11:04:54 +03:00
Sercan Yemen	f395046945	(Chat Panel) Removed mat-list, moved mat-tooltip to the avatar due to mobile scrolling issues	2018-07-12 10:48:31 +03:00
Sercan Yemen	b099022f5a	(FuseSidebar) Max. width & width tweaks for small screen devices	2018-07-12 10:20:34 +03:00
Sercan Yemen	25a6ca2684	(Navbar) Added classes to the navbar containing fuse-sidebar's to contain their custom styles	2018-07-12 09:25:56 +03:00
Sercan Yemen	0cd5d613e0	(AppComponent) Added missing 'is-mobile' control - Fixes: Visible scrollbars on some mobile devices	2018-07-12 09:24:54 +03:00
Sercan Yemen	f45ad11861	Updated changelog date	2018-07-11 11:03:37 +03:00
Sercan Yemen	3cbe302b54	(Toolbar) Changed the username + Small margin tweaks (Navbar) Style variant 2 adjustments and tweaks	2018-07-11 10:29:21 +03:00
Sercan Yemen	e1c906f08b	(Chat Panel) Don't unfold the panel on hover (Chat Panel) Always keep the contacts list in view	2018-07-10 14:55:30 +03:00
Sercan Yemen	585709cf93	(FuseSidebar) Exported temporary fold & unfold methods (FuseSidebar) Added [foldedAutoTriggerOnHover] input for disabling the fold/unfold on mouseenter/mouseleave (Chat Panel) Don't unfold the panel on hover (Chat Panel) Always keep the contacts list in view	2018-07-10 14:55:08 +03:00
Sercan Yemen	ac70ecc616	(Navbar) Improved the style variant 1 Updated Changelog	2018-07-10 13:47:58 +03:00
Sercan Yemen	d5b64f3258	Updated Angular Material to 6.3.3	2018-07-10 12:26:55 +03:00
Sercan Yemen	59d838ef51	Updated changelog	2018-07-10 12:26:40 +03:00
Sercan Yemen	8b14366763	(Angular Material Examples) Updated the examples	2018-07-10 12:26:29 +03:00
Sercan Yemen	23b86a7e3d	(Navbar) Style1 variant folded height	2018-07-10 12:26:04 +03:00
Sercan Yemen	2f497f1c7b	(Navbar) Improved navbar style1 variant	2018-07-10 11:55:04 +03:00
Sercan Yemen	18009c9275	(Navbar) Finished navbar variants	2018-07-09 21:29:15 +03:00
Sercan Yemen	20d5a68bf3	(Colors) Further improved the color generators + added adaptive-border-color class	2018-07-09 16:37:00 +03:00
Sercan Yemen	59d53ba0b9	(Colors) Improved the color generators	2018-07-09 16:29:46 +03:00
Sercan Yemen	a6c91dd744	(AngularCLI) Added a configuration to serve with extractCss and sourceMap enabled	2018-07-09 14:31:11 +03:00
Sercan Yemen	5045482ef5	(Navbar) Started to adding new style variants to the navbar (wip)	2018-07-09 14:09:53 +03:00
Sercan Yemen	c7d9a7808a	(Footer) Updated buy button link	2018-07-06 10:55:18 +03:00
Sercan Yemen	e4c0340cd7	(Sidebar) Import the takeUntil from the correct location	2018-07-04 19:32:24 +03:00
Sercan Yemen	67cb05be6b	(Chat) Replaced multi line comments with single line comments	2018-07-04 17:55:52 +03:00
Sercan Yemen	634ff42f1a	(Navigation) Updated version number badge	2018-07-04 17:50:37 +03:00
Sercan Yemen	0149beb33c	(Chat Panel) Small color tweak on logo Updated Angular Material to 6.3.2 Updated the changelog Increased the Fuse version to 6.2.0 due to the amount of new stuff	2018-07-04 17:49:44 +03:00
Sercan Yemen	42d9748b10	(Chat Panel) Changed the chat panel icon and title	2018-07-04 17:29:44 +03:00
Sercan Yemen	8355e8a17c	Updated changelog	2018-07-04 17:26:25 +03:00
Sercan Yemen	dbb925334a	(Chat Panel) Styling adjustments	2018-07-04 17:21:51 +03:00
Sercan Yemen	49c8e32dce	(Chat Panel) Styling adjustments	2018-07-03 21:05:52 +03:00
Sercan Yemen	595b16275b	(Chat Panel) Added a chat panel	2018-07-03 18:23:51 +03:00
Sercan Yemen	fb003bc96f	(Scrumboard) Removed an extra semi-colon	2018-07-03 18:06:33 +03:00
Sercan Yemen	d781e59928	(Sidebar) Added "foldedWidth" input for controlling the width of the folded sidebar (Sidebar) Replaced the margin with padding on the folded sidebar's sibling (Docs) Updated Sidebar docs	2018-07-03 13:54:19 +03:00
Sercan Yemen	89f71735a8	(Footer) Make the footer fixed for the Demo so the links can be seen at all times	2018-07-03 13:51:31 +03:00
Sercan Yemen	51d7c6fd6f	(Contacts) Make the "Add Contact" button sticky on mobile devices	2018-07-02 19:51:37 +03:00
Sercan Yemen	e182f19644	Fix scss import path	2018-07-02 19:48:48 +03:00
Sercan Yemen	a1aed2998d	(Navbar) Small fix for "scroll the active menu item into the view"	2018-07-02 16:46:55 +03:00
Sercan Yemen	7ff1d2aed0	(Navbar) Scroll the active menu item into the view	2018-07-02 15:58:07 +03:00
Sercan Yemen	09d1b1034e	(Fuse) Tree-shakable core services, closes #64	2018-07-02 14:30:18 +03:00
Sercan Yemen	4e98ab1682	(Search Bar) Fixed: Height adjustment happens on the wrong media step	2018-07-02 13:29:33 +03:00
Sercan Yemen	984004d07a	(Toolbar) Fixed: Unnecessary _.find in setLanguage method, Closes #66 (Navigation) Fixed: Removed id causing a style issue	2018-07-02 13:22:14 +03:00
Sercan Yemen	64e0451dc6	Removed the id from the navigation as there might be multiple navigations Fixed: getFlatNavigation doesn't correctly get the 'collapsable' items because of the item.type change Closes #71: getFlatNavigation method not correctly working when its called multiple times	2018-07-02 13:15:49 +03:00
Sercan Yemen	224bbf479a	Fixed the Loading bar service small issue	2018-07-02 11:42:03 +03:00
Sercan Yemen	1aa79c257b	Updated the changelog	2018-07-01 14:06:41 +03:00
Sercan Yemen	4d93b6acef	Added a service for the Loading Bar Added FuseLoadingBarService docs Renamed service docs files	2018-07-01 14:02:14 +03:00
Sercan Yemen	ae29f1f03d	Added 'openedChanged' and 'foldedChanged' events to the sidebar Updated the Sidebar docs	2018-07-01 13:10:11 +03:00
Sercan Yemen	f35c1add1c	Added ability to add custom classes to the navigation items using the "classes" property Fixed: Item function and External URL's are missing from horizontal navigation Fixed: Horizontal navigation active item does not highlight correctly	2018-07-01 12:20:33 +03:00
Sercan Yemen	388b724e90	Revert version number increase	2018-06-29 16:58:00 +03:00
Sercan Yemen	023bfea4df	Removed the types definition for Webstorm IDE compatibility	2018-06-28 20:59:55 +03:00
Sercan Yemen	fd4da1e060	Simplified the class and the template as we don't need an extra object for errors Used native .hasError checks on template	2018-06-28 20:34:43 +03:00
Sercan Yemen	85226e6094	Fixed: Changing 'password' field while 'passwordConfirm' field is filled doesn't trigger the 'confirmPassword' validator Simplified the class and the template as we don't need an extra object for errors Used native .hasError checks on template	2018-06-28 20:11:36 +03:00
Sercan Yemen	26a7cc41de	Fixed broken print styles due to the latest layout updates	2018-06-28 17:39:22 +03:00
Sercan Yemen	3deba51322	Updated Angular & Angular Material Increase the Fuse version number Fixed the HMR serve ('npm run start-hmr' and 'npm run start-hmr-sourcemaps')	2018-06-28 13:28:56 +03:00
Sercan Yemen	1835c060d6	Updated the package-lock.json	2018-06-20 17:07:06 +03:00
Sercan Yemen	f75d458abe	Added changelog for v6.1.2	2018-06-20 16:37:59 +03:00
Sercan Yemen	6320e98938	Added sticky header to the e-commerce tables	2018-06-20 16:36:31 +03:00
Sercan Yemen	94d20f8d8d	Replace cdkTable stuff with matTable since table now is a proper Material element	2018-06-20 16:32:26 +03:00
Sercan Yemen	ba2f50bf62	Fixed Angular Material datepicker examples	2018-06-20 16:29:28 +03:00
Sercan Yemen	13746c2a73	Updated Angular Material examples	2018-06-20 16:16:03 +03:00
Sercan Yemen	faef6ec6f8	Increased the Fuse version number Updated Angular Material and couple other packages	2018-06-20 15:30:54 +03:00
Sercan Yemen	b46b253c1c	Small responsive fixes on e-commerce pages	2018-06-18 18:53:21 +03:00
Sercan Yemen	3abd764715	Updated the changelog	2018-06-18 18:42:35 +03:00
Sercan Yemen	1acfe2dfb3	Update the version on changelog navigation item	2018-06-17 14:44:11 +03:00
Sercan Yemen	6d3cfe8ace	Increase the version number Updated the changelog	2018-06-17 14:29:35 +03:00
Sercan Yemen	147525d16a	(Sidebar) Fixed the folded issue	2018-06-17 14:24:10 +03:00
Sercan Yemen	29f8ddda9e	Remove unnecessary input binding from sidebars	2018-06-17 13:16:04 +03:00
Sercan Yemen	1f77e201a1	Added the update date to the changelog	2018-06-15 19:46:31 +03:00
				`@@ -0,0 +1 @@`
				`<fuse-navigation layout="horizontal"></fuse-navigation>`