Add fixed sidenav for desktop

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",

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",

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>

frontend/src/app/app.component.scss

@@ -21,6 +21,7 @@
 
 .drawer {
   padding: 1rem;
+  min-width: 10%;
 
   .nav {
     display: flex;

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 {

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],