update mobile nav

Author: iimpulse

src/app/app.component.css

@@ -13,23 +13,22 @@ <h3 class="center menuTitle">Menu</h3>
       <div *ngIf="mobileNavSection === 'home'">
         <button mat-menu-item routerLink="/">Home</button>
         <button mat-menu-item (click)="sidenav.close()" routerLink="about"> About</button>
-        <button mat-menu-item (click)="mobileNavigate('dataMenu')"> Data
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('dataMenu')"> Data
           <mat-icon>arrow_right</mat-icon>
         </button>
-        <button mat-menu-item (click)="mobileNavigate('toolsMenu')"> Tools
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('toolsMenu')"> Tools
           <mat-icon>arrow_right</mat-icon>
         </button>
-        <button mat-menu-item (click)="mobileNavigate('resourcesMenu')"> Resources
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('resourcesMenu')"> Resources
           <mat-icon>arrow_right</mat-icon>
         </button>
-        <button mat-menu-item (click)="sidenav.close()" routerLink="/community"> Community</button>
       </div>
       <div *ngIf="mobileNavSection === 'toolsMenu'">
         <button mat-menu-item routerLink="browse/profile-search"> Profile Search</button>
-        <button mat-menu-item (click)="mobileNavigate('genomicTools')">Genomic Tools
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('genomicTools')">Genomic Tools
           <mat-icon>arrow_right</mat-icon>
         </button>
-        <button mat-menu-item (click)="mobileNavigate('phenomicTools')">Phenomic Tools
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('phenomicTools')">Phenomic Tools
           <mat-icon>arrow_right</mat-icon>
         </button>
         <button mat-menu-item (click)="sidenav.close()" routerLink="tools/hpo-browser"> Other HPO Browsers</button>
@@ -55,7 +54,7 @@ <h3 class="center menuTitle">Menu</h3>
         <button mat-menu-item (click)="sidenav.close()" routerLink="data/ontology"> Ontology</button>
         <button mat-menu-item (click)="sidenav.close()" routerLink="data/annotations"> Annotations</button>
         <button mat-menu-item (click)="sidenav.close()" routerLink="resources/phenopacket"> Annotations</button>
-        <button mat-menu-item (click)="mobileNavigate('translationMenu')">Translation
+        <button class="iconed" mat-menu-item (click)="mobileNavigate('translationMenu')">Translation
           <mat-icon>arrow_right</mat-icon>
         </button>
         <a mat-menu-item href="/api/hpo/docs"> API</a>

src/app/app.component.html

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
   mobileNavSection = 'home';

src/app/app.component.ts

@@ -1,4 +1,4 @@
-<mat-toolbar [ngClass]="{'navbar-home': !showSearch }" class="mat-elevation-z1 navbar">
+<mat-toolbar [ngClass]="{'navbar-home': !showSearch }" class="mat-elevation-z1 navbar max-sm:flex-wrap flex-nowrap">
   <div class="nav-brand" routerLink="/">
     <img src="assets/hpo-logo-white-no-words.png" class="nav-logo"/>
   </div>