Add console registrars paging, fix empty registrars mobile (#2162)

console-webapp/src/app/header/header.component.html

@@ -1,24 +1,30 @@
-<p>
+<p class="console-app__header">
   <mat-toolbar color="primary">
     <button mat-icon-button aria-label="Open menu" (click)="toggleNavPane()">
       <mat-icon>menu</mat-icon>
     </button>
-    <span>
-      <a
-        [routerLink]="'/home'"
-        routerLinkActive="active"
-        class="console-app__logo"
-      >
-        Google Registry
-      </a>
-    </span>
+    <a
+      [routerLink]="'/home'"
+      routerLinkActive="active"
+      class="console-app__logo"
+    >
+      Google Registry
+    </a>
     <span class="spacer"></span>
     <app-registrar-selector />
     <button mat-icon-button aria-label="Open FAQ">
       <mat-icon>question_mark</mat-icon>
     </button>
-    <button mat-icon-button aria-label="Open user info">
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      #menuTrigger
+      aria-label="Open user info"
+    >
       <mat-icon>person</mat-icon>
     </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="logOut()">Log out</button>
+    </mat-menu>
   </mat-toolbar>
 </p>

console-webapp/src/app/header/header.component.scss

@@ -17,6 +17,21 @@
     color: inherit;
     text-decoration: none;
   }
+  &__header {
+    @media (max-width: 599px) {
+      .mat-toolbar {
+        padding: 0;
+      }
+      .console-app__logo {
+        font-size: 16px;
+      }
+      button {
+        padding-left: 0;
+        padding-right: 0;
+        width: 30px;
+      }
+    }
+  }
 }
 .spacer {
   flex: 1;

console-webapp/src/app/header/header.component.ts

@@ -28,4 +28,8 @@ export class HeaderComponent {
     this.isNavOpen = !this.isNavOpen;
     this.toggleNavOpen.emit(this.isNavOpen);
   }
+
+  logOut() {
+    window.open('/console?gcp-iap-mode=CLEAR_LOGIN_COOKIE', '_self');
+  }
 }