more mobile responsive

OpenAlprWebhookProcessor/angularapp/src/app/_services/account.service.ts

@@ -48,6 +48,7 @@ export class AccountService {
     this.userValue.jwtToken = '';
     localStorage.removeItem('user');
     this.router.navigate(['/account/login']);
+    this.userSubject.next(new User());
   }
 
   refreshToken() {

OpenAlprWebhookProcessor/angularapp/src/app/_services/nav-bar.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class NavBarService {
+    public settingsButtonClicked: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+    public settingsClicked() {
+        this.settingsButtonClicked.next(true);
+    }
+}

OpenAlprWebhookProcessor/angularapp/src/app/app.component.css

@@ -0,0 +1,15 @@
+@media only screen and (max-width: 750px) {
+    span {
+        display: none;
+    }
+
+    .home-button {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: 751px) {
+    .menu-button {
+        display: none;
+    }
+}

OpenAlprWebhookProcessor/angularapp/src/app/app.component.html

@@ -1,10 +1,12 @@
-<nav mat-tab-nav-bar *ngIf="user" [tabPanel]="tabPanel">
-    <a mat-tab-link routerLink="/"><mat-icon>anchor</mat-icon>OpenALPR Webhook Processor</a>
-    <a mat-tab-link routerLink="/" ><mat-icon>home</mat-icon>Home</a>
-    <a mat-tab-link routerLink="/plates"><mat-icon>crop_16_9</mat-icon>Plates</a>
-    <a mat-tab-link routerLink="/users"><mat-icon>account_box</mat-icon>Users</a>
-    <a mat-tab-link routerLink="/settings"><mat-icon>settings</mat-icon>Settings</a>
-    <a mat-tab-link (click)="logout()"><mat-icon>exit_to_app</mat-icon>Logout</a>
+<nav mat-tab-nav-bar mat-align-tabs="start"
+    *ngIf="topBarVisible"
+    [tabPanel]="tabPanel">
+    <a mat-tab-link routerLink="/" class="home-button"><mat-icon>anchor</mat-icon><span>OpenALPR Webhook Processor</span></a>
+    <a mat-tab-link routerLink="/"><mat-icon>home</mat-icon><span>Home</span></a>
+    <a mat-tab-link routerLink="/plates"><mat-icon>crop_16_9</mat-icon><span>Plates</span></a>
+    <a mat-tab-link routerLink="/users"><mat-icon>account_box</mat-icon><span>Users</span></a>
+    <a mat-tab-link (click)="settingsButtonClicked();" routerLink="/settings"><mat-icon>settings</mat-icon><span>Settings</span></a>
+    <a mat-tab-link (click)="logout()"><mat-icon>exit_to_app</mat-icon><span>Logout</span></a>
 </nav>
 
 <alert></alert>

OpenAlprWebhookProcessor/angularapp/src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-
 import { AccountService } from './_services';
 import { User } from './_models';
 import { SignalrService } from './signalr/signalr.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { NavBarService } from './_services/nav-bar.service';
 
 @Component({
     selector: 'app',
@@ -11,13 +12,24 @@ import { SignalrService } from './signalr/signalr.service';
 })
 export class AppComponent implements OnInit, OnDestroy {
     user: User;
-    appPlatesVisible: boolean;
     appSettingsVisible: boolean;
-
+    menuButtonVisible: boolean;
+    topBarVisible: boolean;
+
     constructor(
         private signalRService: SignalrService,
-        private accountService: AccountService) {
-            this.accountService.user.subscribe(x => this.user = x);
+        private accountService: AccountService,
+        private navBarService: NavBarService,
+        private router: Router) {
+            this.accountService.user.subscribe(x => {
+                this.topBarVisible = x.id !== undefined;
+            });
+
+            this.router.events.subscribe((routerEvent) => {
+                if(routerEvent instanceof(NavigationEnd)) {
+                    this.menuButtonVisible =(routerEvent as NavigationEnd).url == "/settings";
+                }
+            });
     }
 
     public ngOnInit() {
@@ -31,4 +43,12 @@ export class AppComponent implements OnInit, OnDestroy {
     public logout() {
         this.accountService.logout();
     }
+
+    public selectedTabChange(event: Event) {
+        console.log(event);
+    }
+
+    public settingsButtonClicked() {
+        this.navBarService.settingsClicked();
+    }
 }

OpenAlprWebhookProcessor/angularapp/src/app/settings/settings.component.html

@@ -1,8 +1,10 @@
 <mat-sidenav-container class="example-container">
-	<mat-sidenav mode="side" opened
-	[fixedInViewport]="false"
-	[fixedTopGap]="0"
-	[fixedBottomGap]="0">
+	<mat-sidenav
+		mode="over"
+		[(opened)]="navBarVisible"
+		[fixedInViewport]="false"
+		[fixedTopGap]="0"
+		[fixedBottomGap]="0">
 		<mat-nav-list>
 			<mat-list-item (click)="openSettings('camera')">
 				<mat-icon matListItemIcon>videocam</mat-icon>

OpenAlprWebhookProcessor/angularapp/src/app/settings/settings.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
+import { NavBarService } from 'app/_services/nav-bar.service';
 
 @Component({
   selector: 'app-settings',
@@ -8,13 +9,18 @@ import { MatSidenav } from '@angular/material/sidenav';
 })
 export class SettingsComponent implements OnInit {
   visibleSetting: string;
+  navBarVisible: boolean = false;
 
-  constructor() { }
+  constructor(private navBarService: NavBarService) { }
 
   ngOnInit(): void {
+    this.navBarService.settingsButtonClicked.subscribe(() => {
+      this.navBarVisible = !this.navBarVisible;
+    })
   }
 
   public openSettings(settingName: string) {
     this.visibleSetting = settingName;
+    this.navBarVisible = !this.navBarVisible;
   }
 }