#2 Header (#38)

src/src/app/app.component.css

@@ -1,7 +1,8 @@
 header {
   grid-area: header;
-  background: orange;
   padding: 10px;
+  background: white;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
 }
 
 main {
@@ -23,7 +24,7 @@ aside {
   min-height: 700px;
   display: grid;
   grid-gap: 10px;
-  grid-template: 100px 600px 100px / 200px 1fr 200px;
+  grid-template: 70px 600px 100px / 200px 1fr 200px;
   grid-template-areas:
     'header header header'
     'main main right-sidebar'

src/src/app/app.module.ts

@@ -10,6 +10,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { environment } from '../environments/environment';
 import { MapsModule } from './main/maps.module';
 import { GoogleMapConfig } from './main/models/google-map-config';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
 
 @NgModule({
   declarations: [
@@ -25,6 +30,11 @@ import { GoogleMapConfig } from './main/models/google-map-config';
     MapsModule.forRoot(<GoogleMapConfig>{
       googleMapApiKey: environment.googleMapApiKey,
     }),
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/src/app/header-panel/header-panel.component.css

@@ -0,0 +1,33 @@
+.header-container {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.header-container-right {
+  width: 50%;
+  display: flex;
+  margin-left: auto;
+}
+
+.header-container-right .mat-button {
+  margin-right: 15%;
+}
+
+.login-search {
+  display: flex;
+  margin-left: auto;
+  width: 38%;
+}
+
+.login-search .mat-button {
+  margin-right: 0;
+}
+
+mat-icon, span{
+  color: #A4C6CB;
+}
+
+.search-panel {
+  width: 80%;
+}

src/src/app/header-panel/header-panel.component.html

@@ -1 +1,29 @@
-<p>header-panel works!</p>
+<div class="header-container">
+  <div class="logo">
+    <img src="assets/img/logo.svg" alt="logo">
+  </div>
+  <div class="header-container-right">
+    <button mat-button>
+      <mat-icon>info</mat-icon>
+      <span>О проекте</span>
+    </button>
+    <button mat-button>
+      <mat-icon>add_location_alt</mat-icon>
+      <span>Добавить место</span>
+    </button>
+    <div class="login-search">
+      <mat-form-field class="search-panel">
+        <input
+          type="text"
+          placeholder="Введите адрес"
+          matInput>
+        <button mat-button matSuffix mat-icon-button>
+          <mat-icon>search</mat-icon>
+        </button>
+      </mat-form-field>
+      <button mat-button>
+          <img src="assets/img/User_avatar.svg" alt="user">
+      </button>
+    </div>
+  </div>
+</div>