Add console UI main layout, settings page and contact settings (#1989)

* Header initialized

* Added settings page

* switch history mode to hash

* Add eslint

* Add prettier and reformat

* Contact details in a bottom sheet for mobile devices

* Add contact details events abstraction

* Fix formatting issue and update deps versions

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

@@ -0,0 +1,15 @@
+<p>
+  <mat-toolbar color="primary">
+    <button mat-icon-button aria-label="Open menu" (click)="toggleNavPane()">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <span>Google Registry</span>
+    <span class="spacer"></span>
+    <button mat-icon-button aria-label="Open FAQ">
+      <mat-icon>question_mark</mat-icon>
+    </button>
+    <button mat-icon-button aria-label="Open user info">
+      <mat-icon>person</mat-icon>
+    </button>
+  </mat-toolbar>
+</p>

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

@@ -0,0 +1,17 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+.spacer {
+  flex: 1;
+}

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

@@ -0,0 +1,36 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [HeaderComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,31 @@
+// Copyright 2023 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.less'],
+})
+export class HeaderComponent {
+  private isNavOpen = false;
+
+  @Output() toggleNavOpen = new EventEmitter<boolean>();
+
+  toggleNavPane() {
+    this.isNavOpen = !this.isNavOpen;
+    this.toggleNavOpen.emit(this.isNavOpen);
+  }
+}