trying to make menu work with empty components

src/app/app-routing.module.ts

 import {RewardOverviewComponent} from './reward-overview/reward-overview.component';
 import {RewardPaidComponent} from './reward-paid/reward-paid.component';
 import {RewardUnpaidComponent} from './reward-unpaid/reward-unpaid.component';
+import {PayInComponent} from './pay-in/pay-in.component';
+import {PeopleAddComponent} from './people-add/people-add.component';
+import {SettingsComponent} from './settings/settings.component';
 
 
 const routes: Routes = [
   {path : '', component: DashboardComponent, canActivate: [AuthGuard]},
+  {path : 'settings', component: SettingsComponent, canActivate: [AuthGuard]},
   {path : 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
   {path : 'login', component: AuthComponent},
   {path : 'transaction', component: TransactionComponent, canActivate: [AuthGuard]},
   {path : 'reward-overview', component: RewardOverviewComponent, canActivate: [AuthGuard] },
   {path : 'reward-paid', component: RewardPaidComponent, canActivate: [AuthGuard] },
   {path : 'reward-unpaid', component: RewardUnpaidComponent, canActivate: [AuthGuard] },
+  {path : 'pay-in', component: PayInComponent, canActivate: [AuthGuard] },
+  {path : 'lender-uploads', component: LenderUploadsComponent, canActivate: [AuthGuard] },
+  {path : 'list-all-people', component: LenderUploadsComponent, canActivate: [AuthGuard] },
+  {path : 'people-add', component: PeopleAddComponent, canActivate: [AuthGuard] },
   {path : 'e403', component: E403Component, },
 ];
 

src/app/app.module.ts

 import { RewardOverviewComponent } from './reward-overview/reward-overview.component';
 import { RewardUnpaidComponent } from './reward-unpaid/reward-unpaid.component';
 import { RewardPaidComponent } from './reward-paid/reward-paid.component';
+import { PayInComponent } from './pay-in/pay-in.component';
+import { PeopleAddComponent } from './people-add/people-add.component';
+import { ListAllPeopleComponent } from './list-all-people/list-all-people.component';
+import { SettingsComponent } from './settings/settings.component';
 
 
 
     AdminRewardByBrokerComponent,
     RewardOverviewComponent,
     RewardUnpaidComponent,
-    RewardPaidComponent
+    RewardPaidComponent,
+    PayInComponent,
+    PeopleAddComponent,
+    ListAllPeopleComponent,
+    SettingsComponent
   ],
   imports: [
     BrowserModule,

src/app/list-all-people/list-all-people.component.html

+<p>list-all-people works!</p>

src/app/list-all-people/list-all-people.component.spec.ts

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

src/app/list-all-people/list-all-people.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-list-all-people',
+  templateUrl: './list-all-people.component.html',
+  styleUrls: ['./list-all-people.component.scss']
+})
+export class ListAllPeopleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/main-menu-items.ts

         items: [
             { text: 'Summary', fa: faChartArea, url: './#dashboard'},
             { text: '--', separator: 'true'  },
-            { text: 'Logout', icon: 'logout', url: './#login'}]
+            { text: 'Settings', icon: 'logout', url: './#settings'},
+            { text: '--', separator: 'true'  },
+            { text: 'Logout', icon: 'logout'},
+        ]
     },
     {
         text: 'Loans',
             { text: 'Start New Loan', icon: 'plus', url: './#edit-loan/' },
             { text: 'List All', icon: 'table' , url: './#list-all-loans' },
             { text: '--', separator: 'true'  },
-            { text: 'Income',  icon: 'dollar', url: './#income' },
+            { text: 'Income',  icon: 'dollar', url: './#pay-in' },
             { text: '--', separator: 'true'  },
-            { text: 'Uploads',  icon: 'dollar', url: './#loan-uploads' },
+            { text: 'Uploads',  icon: 'dollar', url: './#lender-uploads' },
         ]
     },
     {
         icon: 'user',
         items: [
             { text: 'Add ', icon: 'plus', url: './#add-people' },
-            { text: 'List All', fa: faIdCard , url: './#list-all-client'},
-            { text: '--', separator: 'true' },
-            { text: 'Broadcast', icon: 'email', url: './#send-to-all-client'},
+            { text: 'List All', fa: faIdCard , url: './#list-all-people'},
             { text: '--', separator: 'true' },
-            { text: 'Broadcast', icon: 'email', url: './#send-to-all-client'},
+            { text: 'Admin', icon: 'email', url: './#send-to-all-people'},
         ]
     },
 ];

src/app/pay-in/pay-in.component.html

+<p>pay-in works!</p>

src/app/pay-in/pay-in.component.spec.ts

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

src/app/pay-in/pay-in.component.ts

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

src/app/people-add/people-add.component.html

+<p>people-add works!</p>

src/app/people-add/people-add.component.spec.ts

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

src/app/people-add/people-add.component.ts

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

src/app/settings/settings.component.html

+<p>settings works!</p>

src/app/settings/settings.component.spec.ts

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

src/app/settings/settings.component.ts

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

src/app/top-bar/top-bar.component.ts

       this.menuService.itemClicked.emit(item);
 
       // handle logout
-      if (item.text === 'Logout'){
-        this.authService.logout();
-        this.login = false;
-        // this.authService.loginSuccess.emit("loggedout");
+      if (item.text.toLowerCase() === 'logout'){
+        this.logout();
       }
     }
   }