Add transaction page and styling for page layout.

src/app/shared/_directives/menu-selection.directive.spec.ts

@@ -0,0 +1,8 @@
+import { MenuSelectionDirective } from './menu-selection.directive';
+
+describe('MenuSelectionDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MenuSelectionDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/shared/_directives/menu-selection.directive.ts

@@ -0,0 +1,28 @@
+import {Directive, ElementRef, Renderer2} from '@angular/core';
+
+@Directive({
+  selector: '[appMenuSelection]'
+})
+export class MenuSelectionDirective {
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {
+    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
+      const mediaQuery = window.matchMedia('(max-width: 768px)');
+      if (mediaQuery.matches) {
+        this.onMenuSelect();
+      }
+    });
+  }
+
+  onMenuSelect(): void {
+    const sidebar = document.getElementById('sidebar');
+    sidebar.classList.add('active');
+    const content = document.getElementById('content');
+    content.classList.add(  'active');
+    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    sidebarCollapse.classList.remove('active');
+  }
+}

src/app/shared/_directives/menu-toggle.directive.spec.ts

@@ -0,0 +1,8 @@
+import { MenuToggleDirective } from './menu-toggle.directive';
+
+describe('MenuToggleDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MenuToggleDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/shared/_directives/menu-toggle.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, ElementRef, Renderer2} from '@angular/core';
+
+@Directive({
+  selector: '[appMenuToggle]'
+})
+export class MenuToggleDirective {
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {
+    this.renderer.listen(this.elementRef.nativeElement, 'click', () => {
+      this.onMenuToggle();
+    });
+  }
+
+  // Menu Trigger
+  onMenuToggle(): void {
+    const sidebar = document.getElementById('sidebar');
+    sidebar.classList.toggle('active');
+    const content = document.getElementById('content');
+    content.classList.toggle('active');
+    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    sidebarCollapse.classList.toggle('active');
+  }
+}

src/app/shared/footer/footer.component.html

@@ -0,0 +1,5 @@
+<!-- Footer Start -->
+<footer class="footer">
+  2020 © Grassroots Economics
+</footer>
+<!-- end Footer -->

src/app/shared/footer/footer.component.spec.ts

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

src/app/shared/footer/footer.component.ts

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

src/app/shared/shared.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TopbarComponent } from './topbar/topbar.component';
+import { FooterComponent } from './footer/footer.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { MenuSelectionDirective } from './_directives/menu-selection.directive';
+import { MenuToggleDirective } from './_directives/menu-toggle.directive';
+import {RouterModule} from '@angular/router';
+
+
+
+@NgModule({
+  declarations: [
+    TopbarComponent,
+    FooterComponent,
+    SidebarComponent,
+    MenuSelectionDirective,
+    MenuToggleDirective
+  ],
+  exports: [
+    TopbarComponent,
+    FooterComponent,
+    SidebarComponent,
+    MenuSelectionDirective
+  ],
+  imports: [
+    CommonModule,
+    RouterModule
+  ]
+})
+export class SharedModule { }

src/app/shared/sidebar/sidebar.component.html

@@ -0,0 +1,26 @@
+<!-- ========== Left Sidebar Start ========== -->
+<div id="sidebar">
+  <nav>
+
+    <div class="sidebar-header">
+      <h3>CIC - Staff Client</h3>
+      <strong>CIC</strong>
+    </div>
+
+    <ul class="list-unstyled components">
+      <li>
+        <a routerLink="/home" routerLinkActive="active" appMenuSelection>
+          <i class="fa fa-home"></i>
+          <span> Dashboard </span>
+        </a>
+      </li>
+      <li>
+        <a routerLink="/tx" routerLinkActive="active" appMenuSelection>
+          <i class="fa fa-briefcase"></i>
+          <span> Transactions </span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<!-- Left Sidebar End -->

src/app/shared/sidebar/sidebar.component.spec.ts

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

src/app/shared/sidebar/sidebar.component.ts

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

src/app/shared/topbar/topbar.component.html

@@ -0,0 +1,11 @@
+<!-- Topbar Start -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
+  <div class="container-fluid">
+    <button type="button" id="sidebarCollapse" class="navbar-btn menutoggle" appMenuToggle>
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+  </div>
+</nav>
+<!-- end Topbar -->

src/app/shared/topbar/topbar.component.spec.ts

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

src/app/shared/topbar/topbar.component.ts

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