app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { DashboardSidebarModule } from './dashboard-sidebar-module/dashboard-sidebar.module';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		FormsModule,
		HttpClientModule,
		DashboardSidebarModule 
	],
	providers: [

	],
	bootstrap: [
		AppComponent
	]
})
export class AppModule { }

styles.css

/**
*
*
* @todo import material design instead of importing fonts
*
*
***/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');


/**
*
*
* Scrollbar Styles
*
*
***/
::-webkit-scrollbar {
    display: none;
}
 
::-webkit-scrollbar-track {
    display: none;
}
 
::-webkit-scrollbar-thumb {
	display: none;
}



/**
*
*
* ViewPort Styles
*
*
***/
*{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}
html, body{
	-webkit-font-smoothing: antialiased;
	padding: 0px;
	margin: 0px;
	display: block;
	width: 100vw;
	height: 100vh;
    font-family: Roboto,'Noto Sans',Helvetica,'Arial Unicode MS',Arial,sans-serif;
}




/**
*
*
* Anchors - overwrite with bootstrap or material
*
*
**/
a {
    color: #2196f3;
    text-decoration: none;
    background-color: transparent;
}
a:link, a:visited {
    color: #2196f3;
    text-decoration: none;
}





/**
*
*
* Material Icons 
* @todo replace with dependencies
*
*
**/
.mp-icon {
    display: inline-block;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 24px;
    height: 24px
}
.icon-mob-alert {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-mobile-alert.svg")
}
.icon-various {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-various.svg")
}

.icon-add-circle {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-add-circle.svg")
}

.icon-mob-alert {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/mobile-alert.svg")
}

.icon-add-page {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-add-page.svg")
}

.icon-add-to-folder {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-add-to-folder.svg")
}

.icon-add-to-report {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-add-to-report.svg")
}

.icon-alert {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-alert.svg")
}

.icon-alert-white {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-alert-white.svg")
}

.icon-arrow-down {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-arrow-down.svg")
}

.icon-am-radio {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-am-radio.svg")
}

.icon-arrows-blue {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-arrows-blue.svg")
}

.icon-blog {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-blog.svg")
}

.icon-filled-comment {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-filled-comment.svg")
}

.icon-bookmark {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-bookmark.svg")
}

.icon-brief {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-brief.svg")
}

.icon-charts {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-chart.svg")
}

.icon-chart-white {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-chart-white.svg")
}

.icon-close-circle {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-close-circle.svg")
}

.icon-comfortable-view,
.none_comfortable .icon-comfortable-view {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-comfortable-view.svg")
}

.icon-compact-view,
.none_compact .icon-compact-view {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-compact-view.svg")
}

.icon-comment {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-comment.svg")
}

.icon-conference {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-conference.svg")
}

.icon-coverage {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-coverage.svg")
}

.icon-coverage-white {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-coverage-white.svg")
}

.icon-download-blue {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-download-blue.svg")
}

.icon-export-to-excel {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-export-to-excel.svg")
}

.icon-facebook {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-facebook.svg")
}

.icon-fm-radio {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-fm-radio.svg")
}

.icon-folder {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-folder.svg")
}

.icon-forum {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-forum.svg")
}

.icon-grid {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-grid.svg")
}

.icon-info {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-info.svg")
}

.icon-info-blue {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-info-blue.svg")
}

.icon-info-gray {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-info-gray.svg")
}

.icon-instagram {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-instagram.svg")
}

.icon-magazine {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-magazine.svg")
}

.icon-multi-brief {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-multi-brief.svg")
}

.icon-multi-folder {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-multi-folder.svg")
}

.icon-multi-page {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-multi-page.svg")
}

.icon-menu-blue {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-menu-blue.svg")
}

.icon-newspaper {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-newspaper.svg")
}

.icon-navbar-toggle {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-navbar-toggle.svg")
}

.icon-navbar-close {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-navbar-close.svg")
}

.icon-online-news {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-online-news.svg")
}

.icon-person {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-person.svg")
}

.icon-person-circle {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-person-circle.svg")
}

.icon-person-white {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-person-white.svg")
}

.icon-support {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-support.svg")
}

.icon-syndication {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-syndication.svg")
}

.icon-release {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-release.svg")
}

.icon-remove {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-remove.svg")
}

.icon-rss {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-rss.svg")
}

.icon-rss-white {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-rss-white.svg")
}

.icon-tv {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-tv.svg")
}

.icon-twitter {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-twitter.svg")
}

.icon-youtube {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-youtube.svg")
}

.icon-video {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-video.svg")
}

.icon-social {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-social.svg")
}

.images-and-video {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/images-and-video.svg")
}

.icon-delete {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-delete.svg")
}

.icon-language-navbar {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-language-navbar.svg")
}

.icon-language-sidebar {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-language-sidebar.svg")
}

.icon-question-mark {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-question-mark.svg")
}

.icon-settings {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-settings.svg")
}

.icon-qa {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-qa.svg")
}

.icon-weibo {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-weibo.svg")
}

.icon-google-plus {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-google-plus.svg")
}

.icon-sentiment-positive {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-positive.svg")
}

.icon-sentiment-positive-verified {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-positive-verified.svg")
}

.icon-sentiment-negative {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-negative.svg")
}

.icon-sentiment-negative-verified {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-negative-verified.svg")
}

.icon-sentiment-neutral {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-neutral.svg")
}

.icon-sentiment-neutral-verified {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-neutral-verified.svg")
}

.icon-sentiment-not-scored {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-sentiment-not-scored.svg")
}

.active .icon-grid {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-grid-active.svg")
}

.active .icon-bookmark {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-bookmark-active.svg")
}

.active .icon-comfortable-view {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-comfortable-view-blue.svg")
}

.active .icon-compact-view {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-compact-view-blue.svg")
}

.active .icon-alert {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-alert-active.svg")
}

.active .icon-add-page {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-add-page-active.svg")
}

.active .icon-video {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-video-active.svg")
}

.active .icon-charts {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-chart-active.svg")
}

.active .icon-multi-page {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-multi-page-active.svg")
}

.active .icon-person {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-person-active.svg")
}

.active .icon-release {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-release-active.svg")
}

.active .icon-rss {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-rss-active.svg")
}

.active .icon-coverage {
    background-image: url("https://s3-ap-southeast-2.amazonaws.com/isentia.assets/assets/img/icon-coverage-active.svg")
}