chore(demo, intranet-header-workspace): Refactor intranet-header demo (…

…#2832)

### Why this big refactor?

Starting with #2829 and
other old issue, the intranet-header has quite some issues when we try
to debug it:
* The preview style applied to integrate the samples in the demo app is
an override mess and exposes other issue (check on mobile how the active
button is going outside the box for example)
* Replicating the code into the intranet-header-workspace didn't give us
the same result, especially as there is some added code in `styles.scss`
in the intranet-header-workspace

Also, the `isPreview` and `.preview` class were probably already copied
from the user, even with all the warnings on the page.

I know that the demo app is deprecated, and we should avoid changing it,
but it is at the moment the only way to display the intranet-header for
the public, and we don't know how long until we'll have another way.

### What are the changes
* This proposal gives us two ways to debug the intranet-header either
through the demo app or through the intranet-header-workspace.
* A lot of unnecessary demo styles are removed
* Demos are displayed through the usage of iframe

packages/demo/src/app/app-routing.module.ts

@@ -50,14 +50,24 @@ import { StepperDemoPageComponent } from './post-sample/components/stepper/stepp
 import { DatatableDemoPageComponent } from './post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component';
 import { FormsDemoPageComponent } from './post-sample/components/forms/forms-demo-page/forms-demo-page.component';
 import { PostCardsDemoPageComponent } from './post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component';
+import { LayoutContainerComponent } from './layout-container/layout-container.component';
+import { IntranetHeaderDemoRegularComponent } from './intranet-layout/components/intranet-header-demo-regular/intranet-header-demo-regular.component';
+import { IntranetHeaderDemoBigSidebarComponent } from './intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component';
+import { IntranetHeaderDemoSmallSidebarComponent } from './intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component';
 /* tslint:enable:max-line-length */
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: 'home', component: HomeComponent, data: { fullWidth: true } },
+  {
+    path: 'home',
+    component: LayoutContainerComponent,
+    data: { fullWidth: true },
+    children: [{ path: '', component: HomeComponent, data: { fullWidth: true } }],
+  },
 
   {
     path: 'bootstrap-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: AccordionDemoPageComponent },
       { path: 'alerts', component: AlertDemoPageComponent },
@@ -90,6 +100,7 @@ const routes: Routes = [
   },
   {
     path: 'ng-bootstrap-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: NgbAccordionDemoPageComponent },
       { path: 'rating', component: NgbRatingDemoPageComponent },
@@ -114,6 +125,7 @@ const routes: Routes = [
   },
   {
     path: 'post-samples',
+    component: LayoutContainerComponent,
     children: [
       { path: 'accordion', component: AccordionDemoPageComponent },
       { path: 'datatable', component: DatatableDemoPageComponent },
@@ -135,10 +147,24 @@ const routes: Routes = [
       { path: 'custom-select', component: CustomSelectDemoPageComponent },
       { path: 'stepper', component: StepperDemoPageComponent },
       { path: 'forms', component: FormsDemoPageComponent },
+      { path: 'intranet-layout', component: IntranetLayoutComponent, data: { fullWidth: true } },
+    ],
+  },
+
+  {
+    path: 'samples',
+    children: [
       {
-        path: 'intranet-layout',
-        component: IntranetLayoutComponent,
-        data: { fullWidth: true },
+        path: 'intranet-layout-regular',
+        component: IntranetHeaderDemoRegularComponent,
+      },
+      {
+        path: 'intranet-layout-sidebar-big-sidebar',
+        component: IntranetHeaderDemoBigSidebarComponent,
+      },
+      {
+        path: 'intranet-layout-sidebar-small-sidebar',
+        component: IntranetHeaderDemoSmallSidebarComponent,
       },
     ],
   },