merging

Author: rxzx

src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import { PrivateHomeComponent } from './private/home/home.component';
 import { PublicSigninComponent } from './public/signin/signin.component';
 import { PublicHomeComponent } from './public/home/home.component';
 import { PublicHeaderComponent } from './public/header/header.component';
+import { AboutComponent } from './private/about/about.component';
 const routes: Routes = [
   // { path: '', component: HomeComponent },
   // { path: 'home', component: HomeComponent, data: { title: 'Home |  Admin Panel' } }
@@ -31,6 +32,7 @@ const routes: Routes = [
     children: [
       { path: '', redirectTo: 'user/home', pathMatch: 'full' },
       { path: 'home', component: PrivateHomeComponent },
+      { path: 'about', component: AboutComponent },
 
     ]
   }

src/app/private/about/about.component.css

@@ -0,0 +1,3 @@
+<p>
+  about works!
+</p>

src/app/private/about/about.component.html

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

src/app/private/about/about.component.spec.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() {
+  }
+
+}

src/app/private/about/about.component.ts

@@ -1,9 +1,15 @@
-footer{
+/* footer{
   text-align: center;
   font-size: 16px;
   font-family: Arial, Helvetica, sans-serif;
   color: #fff;
   background-color: #f52c2c;margin-top: 20px;
 }
 
-footer p{  padding: 0;margin:0;    }
+footer p{  padding: 0;margin:0;    } */
+
+footer {
+  background-color: #555;
+  color: white;
+  padding: 15px;
+}

src/app/private/footer/footer.component.css

@@ -1,5 +1,8 @@
-<footer>
+<!-- <footer>
     <div class="row" style="padding:1%;">
       <p class="col-md-12">All &copy; rights resverd by @Rxzx 2018</p>
     </div>
+  </footer> -->
+  <footer class="container-fluid text-center">
+    <p>Footer Text</p>
   </footer>

src/app/private/footer/footer.component.html

@@ -9,3 +9,15 @@ header{
 header h2{  padding-top: 2%    }
 header a{ color: #fff;text-decoration: none;font-weight: 600;}
 header div{ padding:1%;}
+.navbar {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+.row.content {height: 450px}
+@media screen and (max-width: 767px) {
+  .sidenav {
+    height: auto;
+    padding: 15px;
+  }
+  .row.content {height:auto;}
+}

src/app/private/header/header.component.css

@@ -1,4 +1,4 @@
-<header>
+<!-- <header>
     <div class="row">
       <div class="col-md-4">
         <h2><i class="fas fa-home"></i> Admin Panel</h2>
@@ -11,4 +11,28 @@ <h2><i class="fas fa-home"></i> Admin Panel</h2>
       </div>
       <div class="col-md-6"></div>
     </div>
-  </header>
+  </header> -->
+
+  <nav class="navbar navbar-inverse">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#">Logo</a>
+      </div>
+      <div class="collapse navbar-collapse" id="myNavbar">
+        <ul class="nav navbar-nav">
+          <li [routerLinkActive]="['active']" [routerLink]="['/user/home']" ><a>Home</a></li>
+          <li [routerLinkActive]="['active']" [routerLink]="['/user/about']"><a>About</a></li>
+          <li><a href="#">Projects</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>

src/app/private/header/header.component.html

@@ -11,7 +11,7 @@ import { ModalModule } from 'ngx-bootstrap/modal';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { PopupsComponent } from '../popups/popups.component';
 import { PrivateComponent } from './private.component';
-
+import { AboutComponent } from './about/about.component';
 @NgModule({
   imports: [
     CommonModule,
@@ -27,10 +27,12 @@ import { PrivateComponent } from './private.component';
     PrivateFooterComponent,
     PrivateHeaderComponent,
     PrivateHomeComponent,
-    PopupsComponent
+    PopupsComponent,
+    AboutComponent
   ],
   entryComponents:[
     PopupsComponent
   ],
+
 })
 export class PrivateModule { }