app.component.html

<div class="root-container" fxFlexFill>
  <div class="example-container"></div>
  <!-- TODO: Need to fix top toolbar -->
  <mat-toolbar color="primary" class="nav-toolbar mat-elevation-z4" style="min-height: 45px !important;">
    <mat-toolbar-row style="height: 45px !important; margin-left: 4px">

      <button class="hover-shift" mat-icon-button [disableRipple]="true" (click)="snav.toggle()">
        <mat-icon class="menu-style">menu</mat-icon>
      </button>
      <a routerLink="/home" class="hover-shift" style="color: white; text-decoration: none; margin-left: -8px; margin-bottom: 1px; font-size: 19px !important; font-family: Trebuchet MS, sans-serif !important;" matTooltip="Version 1.0.0; 4/29/2022"><b>Motif Central</b></a>

      <div fxFlex fxLayout style="padding-top: 16.5px;">
        <!-- TODO: Gapping between navitems feels unequal with text. Fix - keep fxLayoutGap flexible and put padding/margin on the text nav items-->
        <ul fxLayout fxShow fxHide.lt-md="true" fxLayoutGap="4px" class="top-navbar-items">

          <li class="hover-shift" matTooltip="Click to see description of site" matTooltipPosition="below">
              <button mat-icon-button (click)="openAboutModal()">
                <mat-icon class = "contact-page-style"><span class="material-icons-outlined">
                    contact_page
                  </span></mat-icon>
              </button>
              <span fxHide.sm (click)="openAboutModal()" style="cursor: pointer; font-size: 19px; font-family: Trebuchet MS, sans-serif !important;" class="mat-h3">About</span><span style="color: #4050b5; font-size: 15.5px;">as</span>
          </li>
          <!--
          <li>
            <a class="nostyle" routerLink="/probound" routerLinkActive="active">
              <button mat-icon-button matTooltip="Download Motif Central release or Probound"
                matTooltipPosition="below">
                <mat-icon class = "build-style">build</mat-icon>
              </button>
              <span fxHide.sm style="cursor: pointer;" class="mat-h3">Download</span>
            </a>
          </li>
          <li>
            <button mat-icon-button matTooltip="Click to see citation" matTooltipPosition="below"
              (click)="openCiteModal()">
              <mat-icon class = "quote-style">format_quote</mat-icon>

            </button>
            <span fxHide.sm (click)="openCiteModal()" style="cursor: pointer;" class="mat-h3">Cite</span>
          </li>
          -->
          <li class="hover-shift" matTooltip="Log out of user session" matTooltipPosition="below" *ngIf="currentUserPrincipal != null">
            <a class="nostyle" routerLink="/logout" routerLinkActive="active">
              <button mat-icon-button>
                <mat-icon class = "import-style">label_important</mat-icon>
              </button>
              <span fxHide.sm style="cursor: pointer; font-size: 19px; font-family: Trebuchet MS, sans-serif !important;" class="mat-h3">Log Out</span><span style="color: #4050b5; font-size: 16.5px;">as</span>
            </a>
          </li>
          <li class="hover-shift" matTooltip="Log in to user session" matTooltipPosition="below" *ngIf="currentUserPrincipal == null">
            <a class="nostyle" routerLink="/login" routerLinkActive="active">
              <button mat-icon-button>
                <mat-icon class = "import-style">label_important</mat-icon>
              </button>
              <span fxHide.sm style="cursor: pointer; font-size: 19px; font-family: Trebuchet MS, sans-serif !important;" class="mat-h3">Log In</span><span style="color: #4050b5; font-size: 16.5px;">as</span>
            </a>
          </li>
        </ul>
      </div>
    </mat-toolbar-row>
  </mat-toolbar>

  <!-- TODO: Need to fix - in mobile view, top navitem is masked by top toolbar-->
  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0"
    fullscreen>
    <mat-sidenav color="primary" #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
      [fixedInViewport]="mobileQuery.matches" opened="false" fixedTopGap="0">
      <mat-nav-list class="toolbar-padding">

        <!-- TODO: Issue - These navbar items between here (side navbar) and above (top navbar) are not modular. Create a new NavItem list for these-->

        <!--
        <mat-list-item *ngIf="currentUserPrincipal != null" matTooltip="View account information"
          matTooltipPosition="right" matTooltipClass="tooltip-class">
          <a routerLink="/account" class="nav-menu-item">
            <mat-icon>face</mat-icon> &nbsp; My Account
          </a>
        </mat-list-item>
        -->
        <!--
        <mat-list-item matTooltip="Page for help using the site" matTooltipPosition="right"
          matTooltipClass="tooltip-class">
          <a routerLink="/help" class="nav-menu-item">
            <mat-icon>help_outline</mat-icon> &nbsp; Help
          </a>
        </mat-list-item>
        -->

        <!--new-->
        <div *ngFor="let nav of navItems">
          <a *ngIf="nav.router; else nonRouter" routerLink="{{nav.routerLink}}" class="nav-menu-item">
            <mat-list-item *ngIf="nav.displayText === 'Home'" [matTooltip]="nav.tooltipText" matTooltipPosition="right">
                <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -4px" *ngIf="nav.icon">{{nav.icon}}</mat-icon> &nbsp; {{nav.displayText}}</div>
            </mat-list-item>
          </a>
          <ng-template *ngIf="nav.displayText === 'Home'" #nonRouter>
            <mat-icon *ngIf="nav.icon">{{nav.icon}}</mat-icon><a mat-list-item
              class="nav-menu-item text-muted">{{nav.displayText}}</a>
          </ng-template>
        </div>
        <a routerLink="/probound" class="nav-menu-item">
          <mat-list-item matTooltip="Download Motif Central release or Probound" matTooltipPosition="right">
              <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -4px">build</mat-icon> &nbsp; Download</div>
          </mat-list-item>
        </a>
        <a href="https://bussemakerlab.org/site/" target="_blank" class="nav-menu-item">
          <mat-list-item matTooltip="View more about the lab" matTooltipPosition="right">
              <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -5px">supervisor_account</mat-icon> &nbsp; Bussemaker Lab</div>
          </mat-list-item>
        </a>

        <mat-divider></mat-divider>

        <a routerLink="/logout" class="nav-menu-item">
          <mat-list-item *ngIf="currentUserPrincipal != null" matTooltip="Log out of user session"
            matTooltipPosition="right">
              <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -3px">label_important</mat-icon> &nbsp; Log Out</div>
          </mat-list-item>
        </a>
        <a routerLink="/login" class="nav-menu-item">
          <mat-list-item *ngIf="currentUserPrincipal == null" matTooltip="Log in to user session"
            matTooltipPosition="right">
              <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -3px">label_important</mat-icon> &nbsp; Log In</div>
          </mat-list-item>
        </a>

        <div *ngFor="let nav of navItems">
          <a *ngIf="nav.router; else nonRouter" routerLink="{{nav.routerLink}}" class="nav-menu-item">
            <mat-list-item *ngIf="nav.displayText === 'Public Motifs'" [matTooltip]="nav.tooltipText" matTooltipPosition="right">
                <div><mat-icon style="display: inline-flex; vertical-align: middle; margin-top: -4px" *ngIf="nav.icon">{{nav.icon}}</mat-icon> &nbsp; {{nav.displayText}}</div>
            </mat-list-item>
          </a>
          <ng-template *ngIf="nav.displayText === 'Public Motifs'" #nonRouter>
            <mat-icon *ngIf="nav.icon">{{nav.icon}}</mat-icon><a mat-list-item
              class="nav-menu-item text-muted">{{nav.displayText}}</a>
          </ng-template>
        </div>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content class="nav-content">
      <div fxLayout="row" fxLayoutAlign="center center" style="margin-top: 5vh;" class="mat-elevation-z0">
        <router-outlet></router-outlet>
      </div>
      <div style="background-color: white; height: 25vh; border-top: 1px solid  #C5CAE9; margin-top: 15px;"
        class="mat-elevation-z1">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-12">
              <mat-card class="mat-elevation-z0">
                <mat-card-content>
                  <div class="center">
                    <a style="padding-right: 40px" href="https://www.columbia.edu/" target="_blank" class="text-center"><img
                        src="assets/images/Logo-Columbia-University.jpg"
                        style="margin-top: 10px; width: 30%; max-width: 200px; margin: 5px;"></a>
                    <a href="https://www.ucmerced.edu/" target="_blank" class="text-center"><img
                        src="assets/images/UCM_Logo_Lake_Yosemite_Blue.png"
                        style="margin-top: 10px; width: 30%; max-width: 200px; margin: 5px;"></a>
                    <a style="padding-left: 40px" href="https://hms.harvard.edu/" target="_blank" class="text-center"><img
                        src="assets/images/hms_logo_final_rgb_0.png"
                        style="margin-top: 10px; width: 30%; max-width: 200px; margin: 5px;"></a>
                  </div>
                </mat-card-content>
              </mat-card>
            </div>
          </div>
        </div>
        <mat-divider></mat-divider>
        <div class="row">
          <div class="col-md-12">
            <p class="text-center" style="margin-top: 21px;">For any website issues, feature requests, or general concerns, please contact the
              authors at <a href="mailto: motifcentral@googlegroups.com"
                target="_blank">motifcentral@googlegroups.com</a></p>
            <p class="text-center">Motif Central is accepting
              feedback.
              Help us by filling out a
              feedback survey! <a
                href="https://docs.google.com/forms/d/e/1FAIpQLSfTwkwDEMGfw__iLSDVt6xZPMSt0lf2nUKGZnmGKIbAtlAeXg/viewform?usp=pp_url"
                target="_blank">Google Forms Link</a></p>
          </div>
        </div>
      </div>
      <!--<p>Cell-X Developed by the <a href="https://bussemakerlab.org/site/" target="_blank">Bussemaker Lab</a></p>-->
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>