sidenav component added

Author: SergeyPirogov

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { HomePageComponent } from './home-page/home-page.component';
 import { PostDetailsComponent } from './post-details/post-details.component';
 import { PostEditComponent } from './post-edit/post-edit.component';
 import { PostComponent } from './post/post.component';
+import { SidenavComponent } from './sidenav/sidenav.component';
 
 
 @NgModule({
@@ -50,7 +51,8 @@ import { PostComponent } from './post/post.component';
     HomePageComponent,
     PostDetailsComponent,
     PostEditComponent,
-    PostComponent
+    PostComponent,
+    SidenavComponent
   ],
   imports: [
     BrowserModule,

src/app/home-page/home-page.component.html

@@ -23,31 +23,7 @@ <h3>
     </div>
 
     <div class="col-md-4">
-        <div class="sidebar-card mb-2">
-            <div class="logo mb-4">
-              <a href="about.html"><img src="assets/img/black_logo.png" alt="" class="img-responsive img-circle" style="margin: 0 auto;"></a>
-            </div>
-           <p class="mb-4">
-              QAGuild подкаст — первый подкаст про тестирование, автоматизацию в тестировании и просто за жизнь.
-           </p>
-
-           <hr>
-           <button type="button" class="btn btn-block btn-outline-dark" (click)="goToAddTheme()">Предложить тему для подкаста</button>
-
-           <a *ngIf="!isLogged()" href="https://www.patreon.com/join/automation_remarks?" class="btn btn-block btn-outline-warning">Задонатить</a>
-
-           <a *ngIf="!isLogged()" href="https://qaguild-slack.herokuapp.com" class="btn btn-block btn-outline-success">Чат подкаста в Slack</a>
-        </div>
-
-        <!-- <div class="sidebar-card">
-            <button type="button" class="btn btn-block btn-outline-dark" (click)="goToAddTheme()">Предложить тему для подкаста</button>
-
-            <a *ngIf="!isLogged()" href="https://www.patreon.com/join/automation_remarks?" class="btn btn-block btn-outline-warning">Задонатить</a>
-
-            <a *ngIf="!isLogged()" href="https://qaguild-slack.herokuapp.com" class="btn btn-block btn-outline-success">Чат подкаста в Slack</a>
-        </div> -->
-
-        
+        <app-sidenav></app-sidenav> 
     </div>
   </div>
 </div>

src/app/post-details/post-details.component.html

@@ -64,9 +64,7 @@ <h6> Стать патроном: <a href="http://patreon.com/automation_remarks
       </div>
 
       <div class="col-md-4">
-          <div class="sidebar-card">
-              <button type="button" class="btn btn-block btn-dark" (click)="goToAddTheme()">Предложить тему для подкаста</button>
-          </div>  
+        <app-sidenav></app-sidenav>
       </div>
     </div>
   </div>

src/app/sidenav/sidenav.component.css

@@ -0,0 +1,11 @@
+.sidebar-card {
+    background-color: #ffffff;
+    border: 1px solid #e9e9e9;
+    padding: 20px;
+    border-top: 3px solid;
+}
+
+.logo img {
+    width: 100%;
+    padding: 15px;
+}

src/app/sidenav/sidenav.component.html

@@ -0,0 +1,13 @@
+<div class="sidebar-card mb-2">
+    <div class="logo mb-4">
+      <a href="about.html"><img src="assets/img/black_logo.png" alt="" class="img-responsive img-circle" style="margin: 0 auto;"></a>
+    </div>
+   <p class="mb-4">
+      QAGuild подкаст — первый подкаст про тестирование, автоматизацию в тестировании и просто за жизнь.
+   </p>
+
+   <hr>
+   <button type="button" class="btn btn-block btn-outline-dark" (click)="goToAddTheme()">Предложить тему для подкаста</button>
+   <a href="https://www.patreon.com/join/automation_remarks?" class="btn btn-block btn-outline-warning">Задонатить</a>
+   <a href="https://qaguild-slack.herokuapp.com" class="btn btn-block btn-outline-success">Чат подкаста в Slack</a>
+</div>

src/app/sidenav/sidenav.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidenav',
+  templateUrl: './sidenav.component.html',
+  styleUrls: ['./sidenav.component.css']
+})
+export class SidenavComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}