Feature/sidenav fix

src/app/analysis-types-list/analysis-types-list/analysis-types-list.component.css

@@ -4,15 +4,15 @@
 }
 
 mat-expansion-panel{
-  width: 300px;
+  width: 290px;
   padding: 5px;
 }
 
 .font-cont{
   font-size: 16px;
 }
 
-.spinner-cont{
+mat-spinner{
   margin-left: 130px;
   margin-top: 10px;
 }

src/app/analysis-types-list/analysis-types-list/analysis-types-list.component.html

@@ -23,4 +23,4 @@
 </mat-expansion-panel>
 </mat-accordion>
 
-<mat-spinner *ngIf="!isTableEmpty" [diameter]="30" class="spinner-cont" [color]=""></mat-spinner>
+<mat-spinner *ngIf="!isTableEmpty" [diameter]="30"></mat-spinner>

src/app/app.component.html

@@ -16,9 +16,9 @@
 
 <mat-sidenav-container>
   <mat-sidenav
-    #sidenav mode="side"
+    #sidenav [mode]="isMobile() ? 'over' : 'side'"
     class="app-side-nav"
-    [opened]="true">
+    [opened]="!isMobile()">
     <mat-list>
       <div class="btn-group-vertical">
         <button mat-raised-button

src/app/app.component.ts

@@ -17,13 +17,22 @@
    limitations under the License.
 */
 
-import { Component } from '@angular/core';
+import {Component, HostListener} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
+
 export class AppComponent {
   title = 'Spectre';
+  minimalPixels = 720;
+
+  isMobile() {
+  const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+    return innerWidth < this.minimalPixels;
+  }
+
 }