Added one button

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import {RouterModule, Routes} from "@angular/router";
+import {HomeComponent} from "./pages/home/home.component";
+import {ThreadsComponent} from "./pages/BoardThreads/threads.component";
+import {BoardsComponent} from "./pages/SingleThread/boards.component";
+import {AboutComponent} from "./pages/about/about.component";
+import {NotFoundComponent} from "./pages/not-found/not-found.component";
+
+const appRoutes: Routes = [
+  { path: '', component: HomeComponent },
+  { path: 'threads', component: ThreadsComponent},
+  { path: 'board', component: BoardsComponent },
+  { path: 'about', component: AboutComponent },
+  { path: '**', component: NotFoundComponent }
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.css

@@ -1,4 +1,63 @@
-h1{
-    color: red;
-    font-size: 10rem;
+
+.main-container {
+  height: 100%;
+}
+
+.sidenav-content {
+
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidenav {
+  padding: 20px;
+  border: 1px solid rgba(25, 116, 211, 0.5);
+}
+.navToggle-btn {
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  padding: 10px 25px;
+  font-family: 'Lato', sans-serif;
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  display: inline-block;
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
+  7px 7px 20px 0px rgba(0,0,0,.1),
+  4px 4px 5px 0px rgba(0,0,0,.1);
+  outline: none;
+}
+.btn-14 {
+  background: rgb(255,151,0);
+  border: none;
+  z-index: 1;
+}
+.btn-14:after {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 0;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: 5px;
+  background-color: #ff0000;
+  background-image: linear-gradient(315deg, #000000 0%, #ff0000 74%);
+  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
+  transition: all 0.3s ease;
+}
+.btn-14:hover {
+  color: #ffffff;
+}
+.btn-14:hover:after {
+  top: auto;
+  bottom: 0;
+  height: 100%;
+}
+.btn-14:active {
+  top: 2px;
 }

src/app/app.component.html

@@ -0,0 +1,15 @@
+<div>
+  <h1>Welcome, traveler.</h1>
+
+  <mat-drawer-container class="main-container" [autosize]="true">
+    <mat-drawer #drawer class="sidenav" mode="side" [mode]="'push'">
+      <app-nav-bar></app-nav-bar>
+    </mat-drawer>
+    <div class="sidenav-content">
+      <button type="button" class = "navToggle-btn btn-14" (click)="drawer.toggle()">
+        Отобразить панель навигации
+      </button>
+    </div>
+    <router-outlet></router-outlet>
+  </mat-drawer-container>
+</div>

src/app/app.component.ts

@@ -1,18 +1,19 @@
 import { Component } from '@angular/core';
 
+
 @Component({
   selector: 'app-root',
-  template: `<div>
-        <h1>Welcome, traveler.</h1>
-        <nav>
-          <a routerLink = "">Главная </a>
-          <a routerLink = "about">О нас </a>
-          <a routerLink = "board">Тред </a>
-          <a routerLink = "threads">Борда </a>
-        </nav>
-        <router-outlet></router-outlet>
-        </div>`
+  templateUrl: `app.component.html`,
+  styleUrls:['app.component.css']
 })
+
 export class AppComponent {
   title = 'Nedvach Angular';
+
+  ngOnInit(): void {
+  }
 }
+
+
+
+

src/app/app.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { Routes, RouterModule } from '@angular/router';
 import { HttpClientModule } from '@angular/common/http';
 
 
+
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
@@ -15,14 +15,12 @@ import { SendPostComponent } from './pages/send-post/send-post.component';
 import { PostComponent } from './pages/SingleThread/post/post.component'
 import { ThreadsComponent } from './pages/BoardThreads/threads.component';
 import { OPComponent } from './pages/BoardThreads/op/op.component';
+import { AppRoutingModule } from './app-routing.module';
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import { NavBarComponent } from './pages/nav-bar/nav-bar.component';
+
 
-const appRoutes: Routes = [
-  { path: '', component: HomeComponent },
-  { path: 'threads', component: ThreadsComponent},
-  { path: 'board', component: BoardsComponent },
-  { path: 'about', component: AboutComponent },
-  { path: '**', component: NotFoundComponent }
-]
 
 @NgModule({
   declarations: [
@@ -34,13 +32,17 @@ const appRoutes: Routes = [
     PostComponent,
     SendPostComponent,
     ThreadsComponent,
-    OPComponent
+    OPComponent,
+    NavBarComponent,
+
   ],
   imports: [
     BrowserModule,
-    RouterModule.forRoot(appRoutes),
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule,
+    MatSidenavModule,
+    BrowserAnimationsModule
   ],
   providers: [
     ApiChatService

src/app/models/boards.ts

@@ -0,0 +1,9 @@
+export interface Board {
+  BoardName: string,
+  BoardExplainedName: string,
+  BoardID: number,
+  ThreadCount: number,
+  PostCount: number
+}
+
+

src/app/pages/about/about.component.ts

@@ -1,6 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-            // двач лучший двач
-import { ApiChatService } from '../../services/api-chat.service';
 
 @Component({
   selector: 'app-about',
@@ -8,12 +6,9 @@ import { ApiChatService } from '../../services/api-chat.service';
   styleUrls: [`./about.component.css`]
 })
 export class AboutComponent implements OnInit {
-// это комментарий
 
   ngOnInit(): void {
-
-
-    console.log('ya tochno ne ta stroka chto budet v drugom commite!');
+    console.log('Yeah, you REALLY expect me to push changes without any console debugging?');
   }
 
 }

src/app/pages/home/home.component.html

@@ -1 +1 @@
-<p>home works!</p>
+<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">

src/app/pages/home/home.component.ts

@@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-home',
-  template: `<img src="http://static.vdk2ch.ru:15555/test-public/sin.jpg">`
-    
+  templateUrl: `home.component.html`,
+
 })
 export class HomeComponent implements OnInit {
-  title = 'Home компонент';
+  title = 'Напоминание';
 
 
 

src/app/pages/nav-bar/nav-bar.component.html

@@ -0,0 +1,10 @@
+<nav>
+  <a routerLink = "">Напоминание </a>
+  <br>
+  <a routerLink = "about">О нас </a>
+  <br>
+  Доски:
+  <div>
+    <a *ngFor="let board of boardsToList" routerLink = "threads" title="{{board.BoardExplainedName}}">{{board.BoardName}}</a>
+  </div>
+</nav>

src/app/pages/nav-bar/nav-bar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/nav-bar/nav-bar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import {Board} from "../../models/boards";
+import {ApiChatService} from "../../services/api-chat.service";
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+  boardsToList: Board[];
+
+
+  constructor(public apiChatService: ApiChatService) {
+  }
+
+  ngOnInit(): void {
+    this.boardsToList = this.apiChatService.getBoards()
+  }
+
+}

src/app/services/api-chat.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { SinglePost } from '../models/post';
+import {Board} from "../models/boards";
 import * as globals from '../const/api';
 
 
@@ -12,9 +13,9 @@ export class ApiChatService {
   constructor(private http: HttpClient) {
   }
 
-  getPosts(boardName:string, threadID: number): Observable<SinglePost[]> {
+  getPosts(boardName: string, threadID: number): Observable<SinglePost[]> {
     //console.log("Получаю посты и картинки");
-    return this.http.get<SinglePost[]>(globals.api_endpoint +'List/', {params:{board: boardName , thread: threadID}}) ;
+    return this.http.get<SinglePost[]>(globals.api_endpoint + 'List/', {params: {board: boardName, thread: threadID}});
   }
 
   sendPostToApi(text: string, imgUrl: string[], threadId: number,) {
@@ -27,19 +28,33 @@ export class ApiChatService {
         ImgURL: imgUrl,
         Thread_Id: threadId
       }
-    return this.http.post( globals.api_endpoint +'PostTo', postToSend)
+    return this.http.post(globals.api_endpoint + 'PostTo', postToSend)
   }
 
-  sendpic(picToSend: File):Observable<any> {
+  sendpic(picToSend: File): Observable<any> {
     const PostPicture = new FormData();
     PostPicture.append('PostPicture', picToSend);
-    return this.http.post(globals.api_endpoint +'UploadPic', PostPicture)
+    return this.http.post(globals.api_endpoint + 'UploadPic', PostPicture)
   }
 
-  getThreads(boardName:string): Observable<SinglePost[]> {
+  getThreads(boardName: string): Observable<SinglePost[]> {
     //console.log("Получаю посты и картинки");
-    return this.http.get<SinglePost[]>(globals.api_endpoint +'Threads/', {params:{board: boardName}}) ;
+    return this.http.get<SinglePost[]>(globals.api_endpoint + 'Threads/', {params: {board: boardName}});
   }
 
-  }
+  sampleBoardList = [
+{
+  BoardName: 'b',
+  BoardExplainedName: 'Всего понемногу',
+  BoardID: 228,
+  ThreadCount: 4,
+  PostCount: 4445
+}
+]
+
+  getBoards(): Board[] {
+    return this.sampleBoardList;
+    //return this.http.get<Board[]>(globals.api_endpoint + 'Boards/');
+  }
+}