Feature/sidebar

package.json

@@ -19,11 +19,11 @@
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
     "rxjs": "~6.6.0",
-    "tslib": "^2.3.0",
+    "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.2",
+    "@angular-devkit/build-angular": "^12.2.2",
     "@angular/cli": "~12.2.2",
     "@angular/compiler-cli": "~12.2.0",
     "@types/jasmine": "~3.8.0",

src/app/app.component.html

@@ -3,4 +3,13 @@
   <div>{{recipe.ingredients}}</div>
   <div>{{recipe.instructions}}</div>
 </div> -->
-<app-login></app-login>
+<!-- <app-login></app-login> -->
+
+
+
+<!-- <app-contact></app-contact> -->
+<!-- <app-thankyou></app-thankyou> -->
+<!-- <app-about></app-about> -->
+<router-outlet></router-outlet>
+
+

src/app/app.component.ts

@@ -2,6 +2,9 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
 import { Recipe } from './recipe';
 import { RecipeService } from './services/recipe.service';
+import { UserService } from './services/user.service';
+import { BlogPostService } from './services/blog-post.service';
+import { TagService } from './services/tag.service';
 
 @Component({
   selector: 'app-root',
@@ -13,15 +16,20 @@ export class AppComponent implements OnInit, AfterViewInit{
   // public employees: Employee[];
   public recipes: Recipe[];
 
-  constructor(/*private empoloyeeService: EmployeeService,*/ private recipeService: RecipeService, private elementRef: ElementRef){}
+  constructor( 
+    private recipeService: RecipeService,
+    private userService: UserService,
+    private blogPostService: BlogPostService,
+    private tagService: TagService,
+    private elementRef: ElementRef){}
 
   ngOnInit() {
     //this.getEmployees();
     //this.getRecipes();
   }
 
   ngAfterViewInit(){
-    this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#C0CFEA";
+    this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = "#7ea381";
   }
 
   // public getEmployees(): void {

src/app/app.module.ts

@@ -9,9 +9,17 @@ import { RecipeComponent } from './components/recipe/recipe.component';
 import { LoginComponent } from './components/login/login.component';
 import { HeaderComponent } from './components/header/header.component';
 import { RouterModule, Routes } from '@angular/router';
+import { AboutComponent } from './components/about/about.component';
+import { ContactComponent } from './components/contact/contact.component';
+import { BlogsComponent } from './components/blogs/blogs.component';
+import { ThankyouComponent } from './components/thankyou/thankyou.component';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
 
 const approutes: Routes = [
-  {path: '', component: AppComponent}
+  {path: '', component: LoginComponent},
+  {path: 'about', component: AboutComponent},
+  {path: 'thankyou', component: ThankyouComponent},
+  {path: 'contact', component: ContactComponent}
 ]
 
 @NgModule({
@@ -20,12 +28,17 @@ const approutes: Routes = [
     // EmployeeComponent,
     RecipeComponent,
     LoginComponent,
-    HeaderComponent
+    HeaderComponent,
+    AboutComponent,
+    ContactComponent,
+    BlogsComponent,
+    ThankyouComponent,
+    SidebarComponent
   ],
   imports: [
     BrowserModule,
-    HttpClientModule//,
-    //RouterModule.forRoot(approutes)
+    HttpClientModule,
+    RouterModule.forRoot(approutes)
   ],
   providers: [/*EmployeeService*/],
   bootstrap: [AppComponent]

src/app/blogPost.ts

@@ -0,0 +1,5 @@
+export interface BlogPost {
+    id: number;
+    title: string;
+    imageUrl: string;
+}

src/app/components/about/about.component.css

@@ -0,0 +1,52 @@
+.banner {
+    height: 500px;
+    background: url(https://c8.alamy.com/comp/TB2Y8M/border-leaves-of-fern-and-tropical-friuts-orange-lemon-lime-on-punchy-yellow-top-view-and-space-for-text-summer-travel-concept-TB2Y8M.jpg);
+    background-size: cover;
+}
+
+h1 {
+    text-align: center;
+    padding-top: 8%;
+    margin-top: -0.5%;
+    font-size: 400%;
+    font-family: 'UnPenheulim', sans-serif;
+    text-shadow: -5px 0px 10px rgb(255, 250, 244);
+}
+
+body {
+    background-color: rgb(255, 250, 244);
+    margin-top: -12%;
+    margin-left: 13%;
+    margin-right: 13%;
+}
+
+.aboutSection {
+    text-align: center;
+    margin-top: 7%;
+    margin-bottom: 4%;
+    font-size: large;
+    padding-bottom: 3%;
+    font-family: 'UnJamoBatang', sans-serif;
+}
+
+.border-top {
+    position: relative;
+    bottom: -30px;
+    width: 60%;
+    left: 20%;
+    right: 10%;
+    border: 3px;
+    border-color: black;
+    border-style: solid;
+}
+
+.border-bottom {
+    position: relative;
+    top: -30px;
+    width: 60%;
+    left: 20%;
+    right: 10%;
+    border: 3px;
+    border-color: black;
+    border-style: solid;
+}

src/app/components/about/about.component.html

@@ -0,0 +1,24 @@
+<style>
+    @import url('http://fonts.cdnfonts.com/css/unjamobatang');
+  </style>
+
+<div class="banner">
+    <h1 class="aboutHeader">About Us</h1>
+</div>
+<body>
+    <div class="border-top"></div>
+    <div class="aboutSection">
+        <p>Sublime Kitchen was created in 2021.</p>
+        <p>Our blog is dedicated to bringing people who love food together in one place. </p>
+        <p>However, not just anyone can create a Sublime Kitchen user account.</p>
+        <p>There is a strict vetting process, including a background check, an</p>
+        <p>assessment, and one or more physical challenges.</p><br>
+        <p>Many have been killed, maimed, or seriously injured in this process,</p>
+        <p>which has been fondly named "The Hunger Games."</p>
+        <p>Those that make it through, however, can expect a friendly, cooking oriented</p>
+        <p>community filled with people who love food and cooking, working together,</p>
+        <p>and sharing their kitchen secrets.</p><br>
+        <button>Back</button>
+    </div>
+    <div class="border-bottom"></div>
+</body>

src/app/components/about/about.component.spec.ts

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

src/app/components/about/about.component.ts

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

src/app/components/blogs/blogs.component.css

@@ -0,0 +1,3 @@
+#postTypes div{
+
+}

src/app/components/blogs/blogs.component.html

@@ -0,0 +1,17 @@
+<app-header></app-header>
+<form action="">
+    <div id="title">
+        <label for="title"></label>
+        <input type="text" id="title" name="title" placeholder="Title"><br>
+    </div>
+    <div id="post">
+        <label for="post"></label>
+        <input type="text" name="post" id="post" placeholder="Body">
+    </div>
+    <span id="imgAndSubmit">
+        <label for="image"></label>
+        <input type="text" name="image" id="image" placeholder="Image">
+        <button>Add</button>
+        <button>Submit</button>
+    </span>
+</form>

src/app/components/blogs/blogs.component.spec.ts

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

src/app/components/blogs/blogs.component.ts

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

src/app/components/contact/contact.component.css

@@ -0,0 +1,8 @@
+.rightSide {
+    /* display: inline-block; */
+    float: right;
+}
+
+.contactForm {
+    display: inline-block;
+}

src/app/components/contact/contact.component.html

@@ -0,0 +1,19 @@
+<div class="contactHeader">
+    Contact us
+</div>
+<br>
+<div class="contactForm">
+    <form >
+      <label for="uname">Name</label><br>
+      <input type="text" name="username"><br><br>
+      <label for="password">Email</label><br>
+      <input type="password" name="password"><br><br>
+      <label for="comment">Comments</label><br>
+      <textarea rows="5" cols="50" id="multiLineInput"></textarea><br>
+      <input type="submit" value="Submit">
+    </form>
+    </div>
+    <div class="rightSide">
+    <img src="https://www.vhv.rs/dpng/d/489-4896249_lime-slice-png-png-download-lime-slice-transparent.png">
+</div>
+