[ACA-1216] Sidenav - hide in preview (#238)

* hide sidebar in preview

* indentation

src/app/components/layout/layout-container.component.html

@@ -1,5 +1,6 @@
 <mat-sidenav-container>
     <mat-sidenav
+        [ngClass]="{ 'sidenav--hide': hideSidenav }"
         [@miniSidenavAnimation]="sidenavAnimationState"
         [opened]="!mobileQuery.matches"
         [mode]="mobileQuery.matches ? 'over' : 'side'">

src/app/components/layout/layout-container.component.scss

@@ -18,6 +18,10 @@ ng-content {
     overflow: hidden;
 }
 
+.sidenav--hide {
+    visibility: hidden !important;
+}
+
 .mat-sidenav-container {
     display: block;
     width: 100%;
@@ -26,8 +30,6 @@ ng-content {
 }
 
 .mat-sidenav {
-    background: #fafafa;
-    border-right: 1px solid rgba(0, 0, 0, 0.07);
     overflow: hidden;
 }
 

src/app/components/layout/layout-container.component.ts

@@ -37,12 +37,11 @@ import { miniSidenavAnimation } from './animations';
 })
 export class LayoutContainerComponent implements OnInit, OnDestroy {
     static STEP_OVER = 600;
-    static COMPACT = true;
 
     @Input() sidenavMin: number;
     @Input() sidenavMax: number;
-    @Input() sidenavCompact: boolean = LayoutContainerComponent.COMPACT;
     @Input() stepOver: number;
+    @Input() hideSidenav: boolean = false;
 
     @ViewChild(MatSidenav) sidenav: MatSidenav;
 
@@ -56,7 +55,6 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         const stepOver = this.stepOver || LayoutContainerComponent.STEP_OVER;
-
         this.mobileQuery = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
         this.mobileQuery.addListener(this.mobileQueryListener);
         this.sidenavAnimationState = { value: 'expanded', params: { width: this.sidenavMax } };
@@ -68,7 +66,7 @@ export class LayoutContainerComponent implements OnInit, OnDestroy {
 
     toggleMenu(): void {
 
-        if (!this.mobileQuery.matches && this.sidenavCompact) {
+        if (!this.mobileQuery.matches) {
             this.isMenuMinimized = !this.isMenuMinimized;
 
             this.sidenavAnimationState =

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

@@ -9,6 +9,7 @@
             sidenavMin="70"
             sidenavMax="320"
             [stepOver]="600"
+            [hideSidenav]="isPreview"
             class="layout__content">
 
             <app-sidenav

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

@@ -24,6 +24,7 @@
  */
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { ContentService } from '@alfresco/adf-core';
@@ -36,12 +37,20 @@ import { BrowsingFilesService } from '../../common/services/browsing-files.servi
 })
 export class LayoutComponent implements OnInit, OnDestroy {
     node: MinimalNodeEntryEntity;
+    isPreview: boolean = false;
 
     private subscriptions: Subscription[] = [];
 
     constructor(
+        private router: Router,
         private contentService: ContentService,
-        private browsingFilesService: BrowsingFilesService) {}
+        private browsingFilesService: BrowsingFilesService) {
+            this.router.events
+                .filter(event => event instanceof NavigationEnd)
+                .subscribe( (event: any ) => {
+                    this.isPreview = event.urlAfterRedirects.includes('preview');
+                });
+        }
 
     ngOnInit() {
         this.subscriptions.concat([

src/app/components/sidenav/sidenav.component.scss

@@ -13,6 +13,9 @@ $sidenav-menu-item--icon-size: 24px;
         display: flex;
         flex: 1;
         flex-direction: column;
+        background: #fafafa;
+        border-right: 1px solid rgba(0, 0, 0, 0.07);
+        height: 100%;
 
         &__section:last-child {
             border-bottom: 0;