From 8e0b21fb1cc5a29c5f7442963d52134c4cbf768b Mon Sep 17 00:00:00 2001
From: Patrick Gebhardt <pjgebhardt@icloud.com>
Date: Sat, 20 Jun 2020 12:42:41 +0200
Subject: [PATCH] Add fixed sidenav for desktop

---
 frontend/package-lock.json          |  8 ++++++++
 frontend/package.json               |  1 +
 frontend/src/app/app.component.html | 10 +++++-----
 frontend/src/app/app.component.scss |  1 +
 frontend/src/app/app.component.ts   |  6 +++++-
 frontend/src/app/app.module.ts      |  4 +++-
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 65db9d8..1446cf0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7900,6 +7900,14 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ngx-device-detector": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/ngx-device-detector/-/ngx-device-detector-1.4.5.tgz",
+      "integrity": "sha512-e3OlUKPrg+hoichpn/wx+C/YicUfdR6SIFo6848Nv5JbpLaMDvEgqsJsQjSGP2phKSnFIsOsDKHBb8iGfZfDLw==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f1a86a1..99df01f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
     "@ngx-translate/core": "^12.1.2",
+    "ngx-device-detector": "^1.4.5",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "uuid": "^8.1.0",
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 687fc4c..bda1690 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,21 +1,21 @@
 <mat-toolbar color="primary" class="toolbar">
-  <button mat-icon-button class="menu-btn" (click)="drawer.toggle()">
+  <button (click)="drawer.toggle()" *ngIf="isMobile" class="menu-btn" mat-icon-button>
     <mat-icon>menu</mat-icon>
   </button>
   <h1 class="title">Travopti - Prototype</h1>
 </mat-toolbar>
 <mat-drawer-container class="content">
-  <mat-drawer #drawer class="drawer">
+  <mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile" class="drawer">
     <div class="nav">
-      <a (click)="drawer.close()" mat-button routerLink="home" routerLinkActive="active">
+      <a (click)="isMobile&&drawer.close()" mat-button routerLink="home" routerLinkActive="active">
         <mat-icon>home</mat-icon>
         <span>Home</span>
       </a>
-      <a (click)="drawer.close()" mat-button routerLink="bookmark" routerLinkActive="active">
+      <a (click)="isMobile&&drawer.close()" mat-button routerLink="bookmark" routerLinkActive="active">
         <mat-icon>bookmark</mat-icon>
         <span>Your bookmarks</span>
       </a>
-      <a (click)="drawer.close()" mat-button routerLink="team" routerLinkActive="active">
+      <a (click)="isMobile&&drawer.close()" mat-button routerLink="team" routerLinkActive="active">
         <mat-icon>group</mat-icon>
         <span>About us</span>
       </a>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index bf9e864..4d373b1 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -21,6 +21,7 @@
 
 .drawer {
   padding: 1rem;
+  min-width: 10%;
 
   .nav {
     display: flex;
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 6906737..c770888 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import {Component, OnInit} from '@angular/core';
+import {DeviceDetectorService} from 'ngx-device-detector';
 
 @Component({
   selector: 'app-root',
@@ -7,7 +8,10 @@ import {Component, OnInit} from '@angular/core';
 })
 export class AppComponent implements OnInit {
 
-  constructor() {
+  isMobile: boolean;
+
+  constructor(private ds: DeviceDetectorService) {
+    this.isMobile = ds.isMobile();
   }
 
   ngOnInit(): void {
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f28d8cd..487f5fe 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -33,6 +33,7 @@ import {BookmarkListComponent} from './containers/bookmark-list/bookmark-list.co
 import {ShareButtonComponent} from './components/share-button/share-button.component';
 import {ShareDialogComponent} from './dialogs/share-dialog/share-dialog.component';
 import {TeamComponent} from './containers/team/team.component';
+import {DeviceDetectorModule} from 'ngx-device-detector';
 
 
 @NgModule({
@@ -73,7 +74,8 @@ import {TeamComponent} from './containers/team/team.component';
     MatButtonToggleModule,
     MatDividerModule,
     MatTooltipModule,
-    MatDialogModule
+    MatDialogModule,
+    DeviceDetectorModule
   ],
   providers: [],
   bootstrap: [AppComponent],