Updated changelog and nav badge

(Chat Panel) Fixed: IE11 issues

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": [
+                            "browserTarget": "fuse:build:hmr"
-                                {
+                        },
-                                    "replace": "src/environments/environment.ts",
+                        "ec": {
-                                    "with": "src/environments/environment.hmr.ts"
+                            "browserTarget": "fuse:build:ec"
-                                }
-                            ]
                         }
                     }
                 },

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",
+          "version": "2.9.2",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.1.tgz",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
-          "integrity": "sha512-h6pM2f/GDchCFlldnriOhs1QHuwbnmj6/v7499eMHqPeW4V2G0elua2eIc2nu8v2NdHV0Gm+tzX83Hr6nUFjQA==",
+          "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
           "dev": true
         }
       }
@@ -121,17 +121,17 @@
       }
     },
     "@angular/animations": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-6.0.7.tgz",
-      "integrity": "sha512-zW/qX3CvsuRDOcTNFFSf7uXktvq1jRrfKR8LdGQ/DER1GU3o8pR3z3H8gHy8lAFc3PESfETtzXinKUNzvTDfpA==",
+      "integrity": "sha512-yOig45sxzpEmlXy+eFgh2v2yxoE/Hh9rn7BX82uj71yobSpCYoe58AEOay1cu0FCcLi/P5qltHepDrRRxNxPMw==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/cdk": {
-      "version": "6.2.1",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-6.3.3.tgz",
-      "integrity": "sha512-uwW4eIGJKqOkR+ew6YcEAh1J4SP98jdyDpsZ4IEMkV9+jXcKfcwcxGFpZvs9wJsAvAr8EgNmZ8h+iuZLwJsvmA==",
+      "integrity": "sha512-cfUwvnGGByZy/poA75/vsELBq68eDUYJe3qi0WvSbtFzbQlsxeqaBiaxVYqmHJkPlSF5nsUhg5KvDowED3a4sA==",
       "requires": {
         "tslib": "^1.7.1"
       }
@@ -174,25 +174,25 @@
       }
     },
     "@angular/common": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-6.0.7.tgz",
-      "integrity": "sha512-xL4Aq+uGQcmHYs90WSKsS9vBC1XO042hM5lSVz+zyYtYzYHdt/Qg1CIuR3zkP+8DG+mf1QZqbg5YtQx5XykmgA==",
+      "integrity": "sha512-MUCCs3FLwqyp5wuvkUTHVGMTd3bNGDxD5IJNvaLgVliGe4r0IlETRXYqyRPs7gdVFPbiJ97P1DUONArj9xL9XA==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/compiler": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-6.0.7.tgz",
-      "integrity": "sha512-Oe0VRCyKfHLatalRuXjCdgaY6hhiMXEL/ueknMJFC0+xA73mEchmLYXj64/1ed753cjnLOM2qbVVwqhc26tmEg==",
+      "integrity": "sha512-J9I2U4NiWIBXl0ZOJkBW5G7xXhphggSirTwFLD4yKCTeJXgyldZytJZRkDUx1uouZtI2/PycvaOZoRr85N67AA==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/compiler-cli": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-6.0.7.tgz",
-      "integrity": "sha512-onRlVLWo1mTdyxLMRtW4iPntTUglJl9T0hacRlscKKlAUT8jaSfqIyknCF3jEXJrTnfKdypen053U7g2ajifrA==",
+      "integrity": "sha512-nDIo4TtE3oXgZiQ5vJEcr5fi3FuXRDJQSOeOQinpCrtEt3s4pU5WAX5DLFGPSD2C/EXRDvHZgF9OTJeu5U4ErQ==",
       "dev": true,
       "requires": {
         "chokidar": "^1.4.2",
@@ -335,9 +335,9 @@
       }
     },
     "@angular/core": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-6.0.7.tgz",
-      "integrity": "sha512-yG4Qz5wHWgFYOCtX62F8MmJ1wZwZA1ALbyQC+WAZfi7Y8Asx8TShJ+3QKUDYwO1jj530pqNbfauDTCmPzzPvaQ==",
+      "integrity": "sha512-aZ0NvbYsMGqg0zUu7+9vuDxnGzwe++RsBBhlwHZHz1ZZwJmU6VJhUhaI+MuKC7rHyFFr9vUxvJ7ilhGaK2+J7A==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -351,63 +351,72 @@
       }
     },
     "@angular/forms": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-6.0.7.tgz",
-      "integrity": "sha512-d1SdhAQ/W1n3vtm1lp5y16EaUylcZ2wftLUj6MSne3bH/2MJ6JsxJKwX+MfPcQCo+DCfG5bF0UMCa1KAwUQthQ==",
+      "integrity": "sha512-bFRdWxLmTiG7z0yZaq22oBHTgVSpJwUJEbZ5ieu21JqTgIDYne+YR/xCJrPj+P2S5NDlEK84g/4y4GoNt/thhQ==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/http": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-6.0.7.tgz",
-      "integrity": "sha512-N9lx1s1h4wki1ob4qne3FdyAWG3TcCAGnUAjDmZ1+c/hhxtcv0iEJ22nBrGkPIsUxIPXg0JgsD1hKhu5DGEbWg==",
+      "integrity": "sha512-zk/kjsfEXjEQIRpmsjuJO5wgFNxj7JGY6Bq0nianZuyCuj/mlm0zflww2NLX4O22IMnvVSun2Kx+kDY44n4hfw==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/language-service": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-6.0.7.tgz",
-      "integrity": "sha512-PH06chMTcWTLfVxZqpXksIx9969N/azEghYx0U+MzlGomeaaBXr7RuZWHRVn/lD5XljrqdWAQSMc+abbn1oKgg==",
+      "integrity": "sha512-R96kTy9Hpy5QPHirJz+5JjnzjJZdwbGwZ6rpq79Fe15RYaYfMjFTAAhmmOgWrnTFBug0QWBWyKV7950JcJIr3Q==",
       "dev": true
     },
     "@angular/material": {
-      "version": "6.2.1",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-6.3.3.tgz",
-      "integrity": "sha512-SBoUXxHknkgwzp5pNDHW0jyrTM0d0Tk4lVyDbtEX8VEPtXqG5nL3BSgyjpJbTvqlmy2kOooUu3qgAmt87VH9lw==",
+      "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",
+      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-6.3.3.tgz",
-      "integrity": "sha512-mZA/gUDI/B6lnKBx0Qov3920MdNhOvVk0oQq/wrxgt2I25AVbpKZO2d8PSCBATQzWjqUwN3GKtcQFx0bPtvNCQ==",
+      "integrity": "sha512-YFi1iED8gcHhCwkWGMkyJtHX/tWAsQWnRNrh1AwbWl4JW1739vPAM/OimdIijeGAZ5dVVZX4A4EscCBb74b4dA==",
       "requires": {
         "tslib": "^1.7.1"
       }
     },
     "@angular/platform-browser": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-6.0.7.tgz",
-      "integrity": "sha512-FSsA9C3cJa7S4SPUAhypKlTQf4uA4hiqx/h65v7frDiyRVHv22oWKX7aKmyyb9oP5FHN/TDeQiRn4m8XNqG6AQ==",
+      "integrity": "sha512-CASH1CDr2DD+aBrWN9qpDDFTI3H6p/oqH23h28bEV+LZl7F57r4sj8KXKgaE+mcrOFRQqXTAlPoq3hRCLmhtVA==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/platform-browser-dynamic": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-6.0.7.tgz",
-      "integrity": "sha512-TTSLOMVrgRXI29xmBWsnSp8187vbWnbj0YEehuyup2FmltUl+H5Vms7poWV9/6fI3RnW3Yg9Ziv3T5iKqsiADQ==",
+      "integrity": "sha512-8G45A9w8UJvX3vPEHqeJHt/sd0zu6w1M+rsnOCo78r35SjsLbrmDNhc4VkLZFJ+iNjgPWtNtdpeXQqtTHE46yw==",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "@angular/router": {
-      "version": "6.0.5",
+      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-6.0.7.tgz",
-      "integrity": "sha512-M3cb5CDX+WvkM2xmFeP64zPwLJ6by6cyzl5OCfEQjoTGKOFY7N2B4kHAOw5KJN3nIEd0PersSBgf11Y9g7GPwA==",
+      "integrity": "sha512-KuQBeIgfiwV3bLafepMhYVJQIAF8cTckCudFh5Z0OqckJgGsWSgtvEdtBctPi+lzt7OQBi7Ym2rOv3X0dOvu0Q==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -537,9 +546,9 @@
       }
     },
     "@types/lodash": {
-      "version": "4.14.109",
+      "version": "4.14.110",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.110.tgz",
-      "integrity": "sha512-hop8SdPUEzbcJm6aTsmuwjIYQo1tqLseKCM+s2bBqTU2gErwI4fE+aqUVOlscPSQbKHKgtMMPoC+h4AIGOJYvw==",
+      "integrity": "sha512-iXYLa6olt4tnsCA+ZXeP6eEW3tk1SulWeYyP/yooWfAtXjozqXgtX4+XUtMuOCfYjKGz3F34++qUc3Q+TJuIIw==",
       "dev": true
     },
     "@types/node": {
@@ -795,9 +804,9 @@
       }
     },
     "acorn": {
-      "version": "5.5.3",
+      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.3.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.1.tgz",
-      "integrity": "sha512-jd5MkIUlbbmb07nXH0DT3y7rDVtkzDi4XZOUVWAer8ajmF/DTSSbl5oNFyDOl/OXA33Bl79+ypHhl2pN20VeOQ==",
+      "integrity": "sha512-d+nbxBUGKg7Arpsvbnlq61mc12ek3EY8EQldM3GPAhWJ1UVxC6TDGbIvUMNU6obBX3i1+ptCIzV4vq0gFPEGVQ==",
       "dev": true
     },
     "acorn-dynamic-import": {
@@ -890,9 +899,9 @@
       }
     },
     "angular-draggable-droppable": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-3.0.1.tgz",
-      "integrity": "sha512-plPrP1voXfV0w13LSvKadMIl4UMsP+eVAqZM73VowB/c6YZyIRb50+MXML2UOX2Or1dFGBIJA4pWpcT623Xktw==",
+      "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",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-3.1.0.tgz",
-      "integrity": "sha512-5fpklah0P48S0W89k839WwB7sj7Slik39+EcfKlAgrXgXuwEwPjeXX6mduDYtFDFNkVb081SjEfPbNW/nborJA==",
+      "integrity": "sha512-moVRSGnCgwCKofswHlNGSQWMz9OCC2JRxz4duJ6wC3g3WBMen2NpFSnoueEIMWoo/DJZjCuF3k/kFoTC4Ett3A==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -932,13 +941,19 @@
       },
       "dependencies": {
         "color-convert": {
-          "version": "1.9.1",
+          "version": "1.9.2",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz",
-          "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==",
+          "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",
+      "version": "8.6.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.3.tgz",
-      "integrity": "sha512-cv9v1mYYBcAnZq4MHseJ9AIdjQmNahnpCpPO46oTkQJS2GggsBp2azHjNpAuQ95Epvsg+AIsyjYhfI9YwFxGSA==",
+      "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",
+      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-      "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
+      "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",
+      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
-      "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==",
+      "integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ==",
       "dev": true
     },
     "buffer-indexof": {
@@ -1836,9 +1851,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000851",
+      "version": "1.0.30000856",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000851.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000856.tgz",
-      "integrity": "sha512-Y1ecA1cL9wg0vni8t33nBw/poX8ypm+2c3fbwAESj8cm4ufK9CBFQ1+nUK8Dp5dtFo5Fc3JzkI5DKmQbuIo6hQ==",
+      "integrity": "sha512-x3mYcApHMQemyaHuH/RyqtKCGIYTgEA63fdi+VBvDz8xUSmRiVWTLeyKcoGQCGG6UPR9/+4qG4OKrTa6aSQRKg==",
       "dev": true
     },
     "caseless": {
@@ -1913,29 +1928,30 @@
       }
     },
     "check-types": {
-      "version": "7.3.0",
+      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.4.0.tgz",
-      "integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0=",
+      "integrity": "sha512-YbulWHdfP99UfZ73NcUDlNJhEIDgm9Doq9GhpyXbF+7Aegi3CVV7qqMCKTTqJxlvEvnQBp9IA+dxsGN6xK/nSg==",
       "dev": true
     },
     "chokidar": {
-      "version": "2.0.3",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
-      "integrity": "sha512-zW8iXYZtXMx4kux/nuZVXjkLP+CyIK5Al5FHnj1OgTKGZfp4Oy6/ymtMSKFv3GD8DviEmUPmJg9eFdJ/JzudMg==",
+      "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",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-      "integrity": "sha1-qJ+7Ig9c4l7FboxKqKT9e1sNKf4=",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
       "dev": true,
       "requires": {
-        "boom": "5.x.x"
+        "boom": "2.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"
-          }
-        }
       }
     },
     "crypto-browserify": {
@@ -2568,9 +2573,9 @@
       }
     },
     "d3": {
-      "version": "5.4.0",
+      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-5.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-5.5.0.tgz",
-      "integrity": "sha1-CQGZqFadHeI9BKP/B/4TYJX+p04=",
+      "integrity": "sha512-HRDSYvT3n7kMvJH7Avp7iR0Xsz97bkCFka9aOg04EdyXyiAP8yQzUpLH3712y9R7ffVo1g94t1OYFHBB0yI9vQ==",
       "requires": {
         "d3-array": "1",
         "d3-axis": "1",
@@ -2606,9 +2611,9 @@
       },
       "dependencies": {
         "d3-scale": {
-          "version": "2.0.0",
+          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.1.0.tgz",
-          "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
+          "integrity": "sha512-Bb2N3ZgzPdKVEoWGkt8lPV6R7YdpSBWI70Xf26NQHOVjs77a6gLUmBOOPt9d9nB8JiQhwXY1RHCa+eSyWCJZIQ==",
           "requires": {
             "d3-array": "^1.2.0",
             "d3-collection": "1",
@@ -2718,9 +2723,9 @@
       }
     },
     "d3-format": {
-      "version": "1.2.2",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.3.0.tgz",
-      "integrity": "sha512-zH9CfF/3C8zUI47nsiKfD0+AGDEuM8LwBIP7pBVpyR4l/sKkZqITmMtxRp04rwBrlshIZ17XeFAaovN3++wzkw=="
+      "integrity": "sha512-ycfLEIzHVZC3rOvuBOKVyQXSiUyCDjeAPIj9n/wugrr+s5AcTQC2Bz6aKkubG7rQaQF0SGW/OV4UEJB9nfioFg=="
     },
     "d3-geo": {
       "version": "1.10.0",
@@ -3416,9 +3421,9 @@
       }
     },
     "error-ex": {
-      "version": "1.3.1",
+      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
@@ -4082,9 +4087,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.4.1",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.0.tgz",
-      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
+      "integrity": "sha512-fdrt472/9qQ6Kgjvb935ig6vJCuofpBUD14f9Vb+SLlm7xIe4Qva5gey8EKtv8lp7ahE1wilg3xL1znpVGtZIA==",
       "dev": true,
       "requires": {
         "debug": "^3.1.0"
@@ -4198,14 +4203,14 @@
       "dev": true
     },
     "fsevents": {
-      "version": "1.2.3",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
-      "integrity": "sha512-X+57O5YkDTiEQGiw8i7wYc2nQgweIekqkepI8Q3y4wVlurgBt2SuwxTeYUYMZIGpLZH3r/TsMjczCMXE5ZOt7Q==",
+      "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",
+      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.4.tgz",
-      "integrity": "sha512-/UETyP0W22QILqS+6HowevwhEFJ3MBJnwTf75Qob9Wz9t0DPuisL8kW8YZMK62dHAKE1c1p+gY1TtOLY+USEHA==",
+      "integrity": "sha512-A6RlQvvZEtFS5fLU43IDu0QUmBy+fDO9VMdTXvufKwIkt/rFfvICAViCax5fbDO4zdNzaC3/27ZhKUok5bAJyw==",
       "dev": true,
       "requires": {
         "inherits": "^2.0.3",
@@ -5145,15 +5150,15 @@
       }
     },
     "hawk": {
-      "version": "6.0.2",
+      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-      "integrity": "sha512-miowhl2+U7Qle4vdLqDdPt9m09K6yZhkLDTWGoUiUzrQCn+mHHSmfJgAyGaLRZbPmTqfFFjRV1QWCW0VWUJBbQ==",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
       "dev": true,
       "requires": {
-        "boom": "4.x.x",
+        "boom": "2.x.x",
-        "cryptiles": "3.x.x",
+        "cryptiles": "2.x.x",
-        "hoek": "4.x.x",
+        "hoek": "2.x.x",
-        "sntp": "2.x.x"
+        "sntp": "1.x.x"
       }
     },
     "he": {
@@ -5174,9 +5179,9 @@
       }
     },
     "hoek": {
-      "version": "4.2.1",
+      "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
       "dev": true
     },
     "hosted-git-info": {
@@ -5479,9 +5484,9 @@
       "dev": true
     },
     "install": {
-      "version": "0.11.0",
+      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/install/-/install-0.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.11.2.tgz",
-      "integrity": "sha512-30UqvWKr/59SStU2/bRye4wT1S3mzjwa0oV+BxusB0neGqhxUrwLlnXDbt6QtIfBxCNWFqg+ARnGNjFj8XuV5A=="
+      "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",
+      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.0.tgz",
-      "integrity": "sha512-saJstZWv7oNeOyBh3+Dx1qWzhW0+e6/8eDzo7p5rDFqxntSztloLtuKu+Ejhtq82jsilwOIZYsCz+lIjthg1Hw==",
+      "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",
+      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-6.4.0.tgz",
-      "integrity": "sha512-0uoxt+3BtanTTbQj9elpsZe/6a/BWAl8jdl0m6OyrCXlCiO3q4zGZjWee4905RF0NXGxQvDWT27coqmDeXGsvw=="
+      "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",
+      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
-      "integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
+      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
       "dev": true
     },
     "object-visit": {
@@ -12561,9 +12476,9 @@
       }
     },
     "prismjs": {
-      "version": "1.14.0",
+      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.15.0.tgz",
-      "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==",
+      "integrity": "sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==",
       "requires": {
         "clipboard": "^2.0.0"
       }
@@ -12620,9 +12535,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "6.0.110",
+          "version": "6.0.113",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.110.tgz",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.113.tgz",
-          "integrity": "sha512-LiaH3mF+OAqR+9Wo1OTJDbZDtCewAVjTbMhF1ZgUJ3fc8xqOJq6VqbpBh9dJVCVzByGmYIg2fREbuXNX0TKiJA==",
+          "integrity": "sha512-f9XXUWFqryzjkZA1EqFvJHSFyqyasV17fq8zCDIzbRV4ctL7RrJGKvG+lcex86Rjbzd1GrER9h9VmF5sSjV0BQ==",
           "dev": true
         },
         "adm-zip": {
@@ -13041,9 +12956,9 @@
       "dev": true
     },
     "regenerate": {
-      "version": "1.3.3",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-jVpo1GadrDAK59t/0jRx5VxYWQEDkkEKi6+HjE3joFVLfDOh9Xrdh0dF1eSq+BI/SwvTQ44gSscJ8N5zYL61sg==",
+      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
       "dev": true
     },
     "regenerator-runtime": {
@@ -13160,9 +13075,9 @@
       }
     },
     "request": {
-      "version": "2.85.0",
+      "version": "2.87.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.85.0.tgz",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.87.0.tgz",
-      "integrity": "sha512-8H7Ehijd4js+s6wuVPLjwORxD4zeuyjYugprdOXlPSqaApmL/QOy+EB/beICHVCHkGMKNh5rvihb5ov+IDw4mg==",
+      "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",
+      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
-      "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
+      "integrity": "sha512-AicPrAC7Qu1JxPCZ9ZgCZlY35QgFnNqc+0LtbRNxnVw4TXvjQ72wnuL9JQcEBgXkI9JM8MsT9kaQoHcpCRJOYA==",
       "dev": true,
       "requires": {
         "path-parse": "^1.0.5"
@@ -13811,12 +13724,12 @@
       }
     },
     "sntp": {
-      "version": "2.1.0",
+      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-      "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
+      "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",
+      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.6.tgz",
-      "integrity": "sha512-mR7/Nd5l1z6g99010shcXJiNEaf3fEtmLhRB/sBcQVJGodcHCULPp2y4Sfa43Kv2zq7T+Izmfp/WHCR6dYkQCA==",
+      "integrity": "sha512-N4KXEz7jcKqPf2b2vZF11lQIz9W5ZMuUcIOGj243lduidkf2fjkVKJS9vNxVWn3u/uxX38AcE8U9nnH9FPcq+g==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -14122,9 +14035,9 @@
       "dev": true
     },
     "sshpk": {
-      "version": "1.14.1",
+      "version": "1.14.2",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz",
-      "integrity": "sha1-Ew9Zde3a2WPx1W+SuaxsUfqfg+s=",
+      "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",
+      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+      "integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==",
       "dev": true
     },
     "strip-ansi": {
@@ -14629,9 +14543,9 @@
       }
     },
     "tslib": {
-      "version": "1.9.0",
+      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.2.tgz",
-      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
+      "integrity": "sha512-AVP5Xol3WivEr7hnssHDsaM+lVrVXWUvd1cfXTRkTj80b//6g2wIFEH6hZG0muGZRnHGrfttpdzRk3YlBkWjKw=="
     },
     "tslint": {
       "version": "5.9.1",
@@ -14667,9 +14581,9 @@
       }
     },
     "tsutils": {
-      "version": "2.26.2",
+      "version": "2.27.1",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.26.2.tgz",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.27.1.tgz",
-      "integrity": "sha512-uzwnhmrSbyinPCiwfzGsOY3IulBTwoky7r83HmZdz9QNCjhSCzavkh47KLWuU0zF2F2WbpmmzoJUIEiYyd+jEQ==",
+      "integrity": "sha512-AE/7uzp32MmaHvNNFES85hhUDHFdFZp6OAiZcd6y4ZKKIg6orJTm8keYWBhIhrJQH3a4LzNKat7ZPXZt5aTf6w==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
@@ -15472,9 +15386,9 @@
       }
     },
     "webpack-merge": {
-      "version": "4.1.2",
+      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.3.tgz",
-      "integrity": "sha512-/0QYwW/H1N/CdXYA2PNPVbsxO3u2Fpz34vs72xm03SRfg6bMNGfMJIQEpQjKRvkG2JvT6oRJFpDtSrwbX8Jzvw==",
+      "integrity": "sha512-zxwAIGK7nKdu5CIZL0BjTQoq3elV0t0MfB7rUC1zj668geid52abs6hN/ACwZdK6LeMS8dC9B6WmtF978zH5mg==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.5"
@@ -15530,9 +15444,9 @@
       "dev": true
     },
     "which": {
-      "version": "1.3.0",
+      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
       "dev": true,
       "requires": {
         "isexe": "^2.0.0"

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": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
-    "start-hmr-sourcemaps": "ng serve --hmr -e=hmr",
+    "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/animations": "6.0.7",
-    "@angular/cdk": "6.2.1",
+    "@angular/cdk": "6.3.3",
-    "@angular/common": "6.0.5",
+    "@angular/common": "6.0.7",
-    "@angular/compiler": "6.0.5",
+    "@angular/compiler": "6.0.7",
-    "@angular/core": "6.0.5",
+    "@angular/core": "6.0.7",
     "@angular/flex-layout": "6.0.0-beta.16",
-    "@angular/forms": "6.0.5",
+    "@angular/forms": "6.0.7",
-    "@angular/http": "6.0.5",
+    "@angular/http": "6.0.7",
-    "@angular/material": "6.2.1",
+    "@angular/material": "6.3.3",
-    "@angular/material-moment-adapter": "6.2.1",
+    "@angular/material-moment-adapter": "6.3.3",
-    "@angular/platform-browser": "6.0.5",
+    "@angular/platform-browser": "6.0.7",
-    "@angular/platform-browser-dynamic": "6.0.5",
+    "@angular/platform-browser-dynamic": "6.0.7",
-    "@angular/router": "6.0.5",
+    "@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/compiler-cli": "6.0.7",
-    "@angular/language-service": "6.0.5",
+    "@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",

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

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"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [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()"
+    <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
-       [routerLink]="[item.url]" routerLinkActive="active"
+       (click)="item.function()"
-       [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
+       [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>

src/@fuse/components/navigation/navigation.component.html

@@ -1,5 +1,4 @@
-<div id="main-navigation" class="nav"
+<div class="nav" [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
-     [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>

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%;

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({
+                flatNavigation.push(item);
-                    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
-                });
 
                 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;
     }
 
     /**

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>

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>
 

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>

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;
                 }

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 {

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
+        // Programmatically add/remove padding to the element
-        this._folded = value;
-
-        // Programmatically add/remove margin 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
+                    // Emit the 'openedChanged' event
-                    // and fold the sidebar if it's true
+                    this.openedChanged.emit(this.opened);
-                    if ( this._fuseConfig.layout.navbar.folded )
+
+                    // 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
+        // Only work if the auto trigger is enabled
-        if ( !this.folded )
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
+        this.unfoldTemporarily();
-        this._enableAnimations();
-
-        // Unfold the sidebar temporarily
-        this.unfolded = true;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -554,20 +677,13 @@ export class FuseSidebarComponent implements OnInit, OnDestroy
     @HostListener('mouseleave')
     onMouseLeave(): void
     {
-        // Only work if the sidebar is folded
+        // Only work if the auto trigger is enabled
-        if ( !this.folded )
+        if ( !this.foldedAutoTriggerOnHover )
         {
             return;
         }
 
-        // Enable the animations
+        this.foldTemporarily();
-        this._enableAnimations();
-
-        // Fold the sidebar back
-        this.unfolded = false;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
     }
 
     /**
@@ -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();
+    }
 }

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

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>

src/@fuse/components/theme-options/theme-options.component.scss

@@ -73,11 +73,6 @@
                     }
                 }
             }
-
-            .colors {
-                display: block !important;
-                width: 100%;
-            }
         }
     }
 }

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(),
+                style    : new FormControl(),
-                width  : new FormControl(),
+                width    : new FormControl(),
-                navbar : this._formBuilder.group({
+                navbar   : this._formBuilder.group({
-                    hidden    : new FormControl(),
+                    background: new FormControl(),
-                    position  : 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(),
+                    position  : new FormControl()
-                    background: 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,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'below-static',
+                            position  : 'below-static'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'below-static',
+                            position  : 'below-static'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -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,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'below',
+                            position  : 'below'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'below',
+                            position  : 'below'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -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,
+                            layout    : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'above-static',
+                            position  : 'above-static'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'above-static',
+                            position  : 'above-static'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });
@@ -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,
+                            variant   : 'vertical-style-1'
-                            background: 'mat-fuse-dark-700-bg'
                         },
                         toolbar: {
+                            background: 'mat-white-500-bg',
                             hidden    : false,
-                            position  : 'above',
+                            position  : 'above'
-                            background: 'mat-white-500-bg'
                         },
                         footer : {
+                            background: 'mat-fuse-dark-900-bg',
                             hidden    : false,
-                            position  : 'above-fixed',
+                            position  : 'above-fixed'
-                            background: 'mat-fuse-dark-900-bg'
                         }
                     }
                 });

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[];

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 { FUSE_CONFIG } 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';
 
-@NgModule({
+@NgModule()
-    entryComponents: [],
-    providers      : [
-        FuseConfigService,
-        FuseCopierService,
-        FuseMatchMediaService,
-        FuseMatSidenavHelperService,
-        FuseNavigationService,
-        FuseSidebarService,
-        FuseSplashScreenService,
-        FuseTranslationLoaderService
-    ]
-})
 export class FuseModule
 {
     constructor(@Optional() @SkipSelf() parentModule: FuseModule)

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 the contrast is dark...
-    @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+    @if ($contrast == 'dark') {
 
-        i,
+        // Put down the color classes
-        .icon {
+        #{$classes} {
-            color: rgba(0, 0, 0, 0.54);
-        }
 
-        &.secondary-text,
+            i,
-        .secondary-text {
+            .icon {
-            color: rgba(0, 0, 0, 0.54) !important;
+                color: rgba(0, 0, 0, 0.54);
-        }
+            }
 
-        &.hint-text,
+            &.secondary-text,
-        .hint-text,
+            .secondary-text {
-        &.disabled-text,
+                color: rgba(0, 0, 0, 0.54) !important;
-        .disabled-text {
+            }
-            color: rgba(0, 0, 0, 0.38) !important;
-        }
 
-        &.divider,
+            &.hint-text,
-        .divider {
+            .hint-text,
-            color: rgba(0, 0, 0, 0.12) !important;
+            &.disabled-text,
-        }
+            .disabled-text {
+                color: rgba(0, 0, 0, 0.38) !important;
+            }
 
-        .mat-ripple-element {
+            &.divider,
-            background: rgba(0, 0, 0, 0.1);
+            .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,
+        // Put down the color classes
-        .icon {
+        #{$classes} {
-            color: rgba(255, 255, 255, 1);
-        }
 
-        &.secondary-text,
+            i,
-        .secondary-text {
+            .icon {
-            color: rgba(255, 255, 255, 0.70) !important;
+                color: rgba(255, 255, 255, 1);
-        }
+            }
 
-        &.hint-text,
+            &.secondary-text,
-        .hint-text,
+            .secondary-text {
-        &.disabled-text,
+                color: rgba(255, 255, 255, 0.70) !important;
-        .disabled-text {
+            }
-            color: rgba(255, 255, 255, 0.50) !important;
-        }
 
-        &.divider,
+            &.hint-text,
-        .divider {
+            .hint-text,
-            color: rgba(255, 255, 255, 0.12) !important;
+            &.disabled-text,
-        }
+            .disabled-text {
+                color: rgba(255, 255, 255, 0.50) !important;
+            }
 
-        .mat-ripple-element {
+            &.divider,
-            background: rgba(255, 255, 255, 0.1);
+            .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 the contrast color is dark...
-    @if (rgba(black, 1) == rgba($contrastColor, 1)) {
+    @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
+    // Put down the color classes
-    input[type="text"] {
+    #{$classes} {
-        color: map_get($fuseForeground, base);
-    }
 
-    // Input
+        // Native Input
-    .mat-form-field-label {
+        input[type="text"] {
-        color: map_get($fuseForeground, hint-text);
+            color: map_get($fuseForeground, base);
-    }
+        }
 
-    .mat-form-field-underline {
+        // Input
-        background-color: map_get($fuseForeground, divider);
+        .mat-form-field-label {
-    }
+            color: map_get($fuseForeground, hint-text);
+        }
 
-    // Select
+        .mat-form-field-underline {
-    .mat-select-trigger,
+            background-color: map_get($fuseForeground, divider);
-    .mat-select-arrow {
+        }
-        color: map_get($fuseForeground, hint-text);
-    }
 
-    .mat-select-underline {
+        // Select
-        background-color: map_get($fuseForeground, divider);
+        .mat-select-trigger,
-    }
+        .mat-select-arrow {
+            color: map_get($fuseForeground, hint-text);
+        }
 
-    .mat-select-disabled .mat-select-value,
+        .mat-select-underline {
-    .mat-select-arrow,
+            background-color: map_get($fuseForeground, divider);
-    .mat-select-trigger {
+        }
-        color: map_get($fuseForeground, hint-text);
-    }
 
-    .mat-select-content,
+        .mat-select-disabled .mat-select-value,
-    .mat-select-panel-done-animating {
+        .mat-select-arrow,
-        background: map_get($background, card);
+        .mat-select-trigger {
-    }
+            color: map_get($fuseForeground, hint-text);
+        }
 
-    .mat-select-value {
+        .mat-select-content,
-        color: map_get($fuseForeground, text);
+        .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);
+        @each $hue in $matHues {
-            $contrastColor: map-get(map-get($map, 'contrast'), $hue);
 
-            @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...
+// Generate contrasting colors
-@each $colorName, $colorMap in $matColorsMap {
+@include generateTextColorLevels($dark-contrasting-classes, 'dark');
-
+@include generateTextColorLevels($light-contrasting-classes, 'light');
-    @each $hue in $matColorHues {
+@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
-
+@include generateMaterialElementColors($light-contrasting-classes, 'light');
-        $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, '');
-            }
-        }
-    }
-}

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;
+            }
+        }
+    }
 }

src/@fuse/scss/partials/_print.scss

@@ -36,11 +36,11 @@
     /* General styles */
     app {
 
-        fuse-navbar-vertical,
+        fuse-sidebar,
-        fuse-navbar-horizontal,
+        navbar,
-        fuse-toolbar,
+        toolbar,
-        fuse-footer,
+        footer,
-        fuse-quick-panel,
+        .theme-options-button,
         fuse-theme-options,
         .ps > .ps__rail-x,
         .ps > .ps__rail-y {

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

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/select
+ * https://github.com/zenorocha/clipboard.js/
- * - 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;

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);
+    }
+}
+

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;

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;

src/@fuse/services/translation-loader.service.ts

@@ -7,7 +7,9 @@ export interface Locale
     data: Object;
 }
 
-@Injectable()
+@Injectable({
+    providedIn: 'root'
+})
 export class FuseTranslationLoaderService
 {
     /**

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',
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
-            background: string
         }
         footer: {
+            background: string,
             hidden: boolean,
-            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed',
+            position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
-            background: string
+        },
+        sidepanel: {
+            hidden: boolean,
+            position: 'left' | 'right'
         }
     };
     customScrollbars: boolean;

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;

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>

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;
         }

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();
     }

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'
+                }
+            ]
+        }
+    ];
+
+}

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

src/app/fuse-config/index.ts

@@ -10,23 +10,28 @@ import { FuseConfig } from '@fuse/types';
 
 export const fuseConfig: FuseConfig = {
     layout          : {
-        style         : 'vertical-layout-1',
+        style    : 'vertical-layout-1',
-        width         : 'fullwidth',
+        width    : 'fullwidth',
-        navbar        : {
+        navbar   : {
+            background: 'mat-fuse-dark-700-bg',
+            folded    : false,
             hidden    : false,
             position  : 'left',
-            folded    : false,
+            variant   : 'vertical-style-1'
-            background: 'mat-fuse-dark-700-bg'
         },
-        toolbar       : {
+        toolbar  : {
+            background: 'mat-white-500-bg',
             hidden    : false,
-            position  : 'below-static',
+            position  : 'below-static'
-            background: 'mat-white-500-bg'
         },
-        footer        : {
+        footer   : {
+            background: 'mat-fuse-dark-900-bg',
             hidden    : false,
-            position  : 'below-static',
+            position  : 'below-fixed'
-            background: 'mat-fuse-dark-900-bg'
+        },
+        sidepanel: {
+            hidden  : false,
+            position: 'right'
         }
     },
     customScrollbars: true

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>

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;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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();
+        });
+    }
+}

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
+{
+}

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);
+        });
+    }
+}

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>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.html

@@ -0,0 +1 @@
+<fuse-navigation layout="horizontal"></fuse-navigation>

src/app/layout/components/navbar/horizontal/style-1/style-1.component.scss

@@ -0,0 +1,3 @@
+navbar-horizontal-style-1 {
+
+}

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();
+    }
+}

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
+{
+}

src/app/layout/components/navbar/navbar.component.html

@@ -1,39 +1,11 @@
-<ng-container *ngIf="layout == 'vertical'">
+<ng-container *ngIf="variant === 'horizontal-style-1'">
-
+    <navbar-horizontal-style-1></navbar-horizontal-style-1>
-    <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>
 
-<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">
+<ng-container *ngIf="variant === 'vertical-style-2'">
-        <fuse-navigation layout="horizontal"></fuse-navigation>
+    <navbar-vertical-style-2></navbar-vertical-style-2>
-    </div>
+</ng-container>
-
-</ng-container>

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 {
-
+    display: flex;
-    &:not(.top-navbar) {
+    flex-direction: column;
-        height: 100%;
+    flex: 1 1 auto;
-        overflow: hidden;
+    width: 100%;
-    }
+    height: 100%;
-
-    .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);
-            }
-        }
-    }
 }

src/app/layout/components/navbar/navbar.component.ts

@@ -1,11 +1,4 @@
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, Input, 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';
 
 @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;
+    variant;
-
-    fusePerfectScrollbarUpdateTimeout: any;
-    navigation: any;
-
-    // Private
-    private _fusePerfectScrollbar: FusePerfectScrollbarDirective;
-    private _unsubscribeAll: Subject<any>;
 
     /**
      * Constructor
-     *
-     * @param {FuseNavigationService} _fuseNavigationService
-     * @param {FuseSidebarService} _fuseSidebarService
-     * @param {Router} _router
      */
-    constructor(
+    constructor()
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseSidebarService: FuseSidebarService,
-        private _router: Router
-    )
     {
         // Set the defaults
-        this.layout = 'vertical';
+        this.variant = 'vertical-style-1';
-
-        // 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();
     }
 }

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

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>

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);
+            }
+        }
+    }
+}

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();
+    }
+}

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
+{
+}

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>

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);
+            }
+        }
+    }
+}

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();
+    }
+}

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
+{
+}

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">
+                    <img class="avatar mr-0 mr-sm-16" src="assets/images/avatars/Velazquez.jpg">
-                    <span class="username mr-12" fxHide fxShow.gt-sm>John Doe</span>
+                    <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')"

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;

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
+        // Subscribe to the Fuse loading bar service
-        this._router.events
+        this._fuseLoadingBarService.visible
-            .pipe(
+            .pipe(takeUntil(this._unsubscribeAll))
-                filter((event) => event instanceof NavigationStart),
+            .subscribe((visible) => {
-                takeUntil(this._unsubscribeAll)
+                this.showLoadingBar = visible;
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = true;
-            });
-
-        this._router.events
-            .pipe(
-                filter((event) => event instanceof NavigationEnd)
-            )
-            .subscribe((event) => {
-                this.showLoadingBar = false;
             });
 
         // 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
+        // Set the selected language for the toolbar
-        this.selectedLanguage = _.find(this.languages, {'id': langId});
+        this.selectedLanguage = lang;
 
         // Use the selected language for translations
-        this._translateService.use(langId);
+        this._translateService.use(lang.id);
     }
 }

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 -->

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 {

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,

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 -->

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 {

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,

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 -->

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 {

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,

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 -->

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 {

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,

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',
+        'tab-group-basic',
-        'tabs-template-label'
+        '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'                    : {
+    'table-multiple-header-footer'                           : {
-        title    : 'Native `<table>` that only applies the Material styles',
+        title    : 'Table with multiple header and footer rows',
-        component: TableNativeOnlyExample
+        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'                        : {
+    'table-sticky-columns'                        : {
-        title    : 'Basic tabs',
+        title    : 'Table with a sticky columns',
-        component: TabsOverviewExample
+        component: TableStickyColumnsExample
     },
-    'tabs-template-label'                  : {
+    'table-sticky-complex'                        : {
-        title    : 'Complex Example',
+        title    : 'Tables with toggle-able sticky headers, footers, and columns',
-        component: TabsTemplateLabelExample
+        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,
+    TableStickyColumnsExample,
-    TabsTemplateLabelExample,
+    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,

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;

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);

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">
+    <ng-container matColumnDef="checkbox">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+        <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">
+    <ng-container matColumnDef="avatar">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+        <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">
+    <ng-container matColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+        <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">
+    <ng-container matColumnDef="email">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
+        <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>
@@ -38,9 +38,9 @@
     </ng-container>
 
     <!-- Phone Column -->
-    <ng-container cdkColumnDef="phone">
+    <ng-container matColumnDef="phone">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
+        <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>
@@ -48,9 +48,9 @@
     </ng-container>
 
     <!-- Job Title Column -->
-    <ng-container cdkColumnDef="jobTitle">
+    <ng-container matColumnDef="jobTitle">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+        <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">
+    <ng-container matColumnDef="company">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
-        <mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg>
+        <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">
+    <ng-container matColumnDef="buttons">
-        <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef></mat-header-cell>
-        <mat-cell *cdkCellDef="let contact">
+        <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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let contact; columns: displayedColumns;"
+    <mat-row *matRowDef="let contact; columns: displayedColumns;"
              class="contact"
              (click)="editContact(contact)"
              [ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"

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;
+    }
 }

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,

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">
+                                    <ng-container matColumnDef="avatar">
-                                        <mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell>
+                                        <mat-header-cell fxFlex="96px" *matHeaderCellDef></mat-header-cell>
-                                        <mat-cell fxFlex="96px" *cdkCellDef="let contact">
+                                        <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">
+                                    <ng-container matColumnDef="name">
-                                        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+                                        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-                                        <mat-cell *cdkCellDef="let contact">
+                                        <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">
+                                    <ng-container matColumnDef="position">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>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">
+                                    <ng-container matColumnDef="office">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>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">
+                                    <ng-container matColumnDef="email">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>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">
+                                    <ng-container matColumnDef="phone">
-                                        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>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>
+                                        *matHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
-                                    <mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;">
+                                    <mat-row *matRowDef="let contact; columns: widgets.widget11.table.columns;">
                                     </mat-row>
                                 </mat-table>
                             </div>

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,

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,

src/app/main/apps/e-commerce/orders/orders.component.html

@@ -46,25 +46,25 @@
                        fusePerfectScrollbar>
 
                 <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
+                <ng-container matColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                    <mat-cell *matCellDef="let order">
                         <p class="text-truncate">{{order.id}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Reference Column -->
-                <ng-container cdkColumnDef="reference">
+                <ng-container matColumnDef="reference">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                    <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">
+                <ng-container matColumnDef="customer">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Customer</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                    <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">
+                <ng-container matColumnDef="total">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md>
+                    <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">
+                <ng-container matColumnDef="payment">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                    <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">
+                <ng-container matColumnDef="status">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Status</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order">
+                    <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">
+                <ng-container matColumnDef="date">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
-                    <mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm>
+                    <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">

src/app/main/apps/e-commerce/orders/orders.component.scss

@@ -2,23 +2,29 @@
 
 :host {
 
-    .header {
+    #orders {
 
-        .search-input-wrapper {
+        > .center {
-            max-width: 480px;
-        }
 
-        @include media-breakpoint-down(xs) {
+            > .header {
-            margin: 24px 0;
+
-            height: 128px !important;
+                .search-input-wrapper {
-            min-height: 128px !important;
+                    max-width: 480px;
-            max-height: 128px !important;
+                }
+
+                @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%;
     }

src/app/main/apps/e-commerce/products/products.component.html

@@ -55,17 +55,17 @@
                        fusePerfectScrollbar>
 
                 <!-- ID Column -->
-                <ng-container cdkColumnDef="id">
+                <ng-container matColumnDef="id">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                    <mat-cell *matCellDef="let product">
                         <p class="text-truncate">{{product.id}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Image Column -->
-                <ng-container cdkColumnDef="image">
+                <ng-container matColumnDef="image">
-                    <mat-header-cell *cdkHeaderCellDef></mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                    <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">
+                <ng-container matColumnDef="name">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header>Name</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product">
+                    <mat-cell *matCellDef="let product">
                         <p class="text-truncate">{{product.name}}</p>
                     </mat-cell>
                 </ng-container>
 
                 <!-- Category Column -->
-                <ng-container cdkColumnDef="category">
+                <ng-container matColumnDef="category">
-                    <mat-header-cell *cdkHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-md>
+                    <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">
+                <ng-container matColumnDef="price">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                    <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">
+                <ng-container matColumnDef="quantity">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-sm>
+                    <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">
+                <ng-container matColumnDef="active">
-                    <mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
+                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
-                    <mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs>
+                    <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">

src/app/main/apps/e-commerce/products/products.component.scss

@@ -2,23 +2,29 @@
 
 :host {
 
-    .header {
+    #products {
 
-        .search-input-wrapper {
+        .top-bg {
-            max-width: 480px;
+            @include media-breakpoint-down(xs) {
+                height: 240px;
+            }
         }
 
-        @include media-breakpoint-down(xs) {
+        > .center {
-            margin: 8px 0;
-            height: 192px !important;
-            min-height: 192px !important;
-            max-height: 192px !important;
-        }
-    }
 
-    .top-bg {
+            > .header {
-        @include media-breakpoint-down(xs) {
+
-            height: 240px;
+                .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;
+                }
+            }
         }
     }
 

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">
+    <ng-container matColumnDef="icon">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxFlex="64px"></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="64px">
+        <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">
+    <ng-container matColumnDef="name">
-        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
-        <mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell>
+        <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
     </ng-container>
 
     <!-- Type Column -->
-    <ng-container cdkColumnDef="type">
+    <ng-container matColumnDef="type">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
     </ng-container>
 
     <!-- Owner Column -->
-    <ng-container cdkColumnDef="owner">
+    <ng-container matColumnDef="owner">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Owner</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
     </ng-container>
 
     <!-- Size Column -->
-    <ng-container cdkColumnDef="size">
+    <ng-container matColumnDef="size">
-        <mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide.xs>Size</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
+        <mat-cell *matCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
     </ng-container>
 
     <!-- Modified Column -->
-    <ng-container cdkColumnDef="modified">
+    <ng-container matColumnDef="modified">
-        <mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
+        <mat-cell *matCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
     </ng-container>
 
     <!-- Detail Button Column -->
-    <ng-container cdkColumnDef="detail-button">
+    <ng-container matColumnDef="detail-button">
-        <mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
+        <mat-header-cell *matHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
-        <mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md>
+        <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-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *cdkRowDef="let row; columns: displayedColumns;"
+    <mat-row *matRowDef="let row; columns: displayedColumns;"
              (click)="onSelect(row)"
              [ngClass]="{'mat-accent-50-bg':row == selected}"
              matRipple [@animate]="{value:'*',params:{y:'100%'}}"

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,

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));

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>
 

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,

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()
-    {
-
-    }
-}

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 -->

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()
+    {
+
+    }
+}

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>
+

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()
+    {
+
+    }
+}

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();