Navigation page design (#43)

* navigation page design

docs/templates/template.html

@@ -0,0 +1,9 @@
+<app-header></app-header>
+<div class="fluid-container">
+    <div class="container">
+        <div class="card">
+            <div class="card-header"> </div>
+            <div class="card-body"></div>
+        </div>
+    </div>
+</div>

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { AccountingModule } from './accounting/accounting.module';
 import { LoginModule } from './login/login.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { NavigationModule } from './navigation/navigation.module';
 
 @NgModule({
   imports: [
@@ -34,6 +35,7 @@ import { AppRoutingModule } from './app-routing.module';
     ClientsModule,
     AccountingModule,
     LoginModule,
+    NavigationModule,
     AppRoutingModule
   ],
   declarations: [AppComponent],

src/app/navigation/navigation-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NavigationComponent } from './navigation.component';
+
+const routes: Routes = [
+  { path: 'navigation', component: NavigationComponent},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class NavigationRoutingModule { }

src/app/navigation/navigation.component.html

@@ -0,0 +1,166 @@
+<app-header></app-header>
+<div class="fluid-container">
+  <div class="container">
+
+       <!--  <div class="card card-header">
+        <h4 class="col-sm-3 font-weight-bold">Navigation</h4> -->
+      
+        <div class="col-sm-4 mt-5 mb-3 mx-auto">
+          <input class="form-control mr-sm-2" placeholder="Filter by Name" type="text">
+        </div>
+     
+     
+
+        <ngb-tabset justify="center">
+          <ngb-tab title="Client">
+            <ng-template ngbTabContent>
+              <div class="card col-sm-4 mx-auto">
+                <table class="table table-hover table-responsive-md table-fixed">
+
+                    <!--Table head-->
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+                    <!--Table head-->
+        
+                    <!--Table body-->
+                    <tbody>
+                        <tr>
+                            <th scope="row">4</th>
+                            <td>Jerry</td>
+
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">5</th>
+                            <td>Janis</td>
+
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">6</th>
+                            <td>Gary</td>
+
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">7</th>
+                            <td>Angie</td>
+ 
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">8</th>
+                            <td>John</td>
+
+                        </tr>
+                        <tr>
+                            <th scope="row">9</th>
+                            <td>Otto</td>
+
+                        </tr>
+                        <tr>
+                            <th scope="row">9</th>
+                            <td>Otto</td>
+
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">9</th>
+                            <td>Otto</td>
+ 
+        
+                        </tr>
+                        <tr>
+                            <th scope="row">9</th>
+                            <td>Otto</td>
+
+                        </tr>
+                      
+                    </tbody>
+                    <!--Table body-->
+        
+                </table>
+              </div>
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab>
+            <ng-template ngbTabTitle>
+              Loan</ng-template>
+            <ng-template ngbTabContent>
+                <div class="card col-sm-4 mx-auto">
+                    <table class="table table-hover table-responsive-md table-fixed">
+    
+                        <!--Table head-->
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Name</th>
+                            </tr>
+                        </thead>
+                        <!--Table head-->
+            
+                        <!--Table body-->
+                        <tbody>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>Jerry</td>
+    
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>Janis</td>
+    
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>Jerry</td>
+    
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>Janis</td>
+    
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>Jerry</td>
+    
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>Janis</td>
+    
+            
+                            </tr>
+                          
+                        </tbody>
+                        <!--Table body-->
+            
+                    </table>
+                  </div>
+            </ng-template>
+          </ngb-tab>
+          <ngb-tab title="Groups">
+            <ng-template ngbTabContent>
+              <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
+                Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et
+                odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed
+                diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus
+                nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque
+                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies
+                in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
+            </ng-template>
+          </ngb-tab>
+        </ngb-tabset>
+      </div>
+    </div>
+ 

src/app/navigation/navigation.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavigationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navigation/navigation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit {
+  currentJustify = 'start';
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/navigation/navigation.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+import { CoreModule } from '../core/core.module';
+import { NavigationComponent } from './navigation.component';
+import { NavigationRoutingModule } from './navigation-routing.module';
+
+
+@NgModule({
+  imports: [
+    CoreModule,
+    CommonModule,
+    NgbModule,
+    NavigationRoutingModule
+  ],
+  declarations: [NavigationComponent]
+})
+export class NavigationModule { }