steps.txt

1 - I created a folder called components, where all our custom menu components resided. To make our work neat, a subfolder(custome component) 
is created for each of the user (admin, victim, respondant), this pertern was used for our pages.

2 - A file called victim.components.module.ts (shared module) was created, this file allows us 
to share component among our components. Here we are sharing component for our menu for various pages

3. To be able to  use features provided by Angular and Ionic, I imported NgModule, CommonModule and IonicModule into the shared module. For example if IonicModule is not imported, ionic extentended elements will not work and this could break our application.

4. In other to make our custom component sharable, I imported the custom component into the shared module.

## USAGE for new pages
There are three categories of users(admin, victim, respondant), some of their pages use either blue background or yellow background and have different menu contents, hence custom components are created to make sharing easy. 

See custom component below:
 -  <app-admin-menu></app-admin-menu>             Blue
 -  <app-respondant-menu></app-respondant-menu>   Blue
 -  <app-victim-menu></app-victim-menu>           Yellow
 -  <app-victimblue-menu></app-victimblue-menu>   Blue

 To use any of this component, you need to import the module that allows us to share the component, for exmple, 
 
 ## For user-location page: 
 1 - Open user-location.module.ts
 2 - Import VictimMenuModule  - import { VictimMenuModule } from ../../../components/victim.components.module' -
 3 - Locate @NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    *VictimMenuModule,*
    UserLocationPageRoutingModule
  ],
  declarations: [UserLocationPage]
})
export class UserLocationPageModule {}

and place the VictimMenuModule here

4. Since the background color of our Menu bar is yellow we will use 
'<app-victim-menu></app-victim-menu>' component, this should be placed above our html


Do a total refactoring of the Menu, challenges encounter was as a result of not importing router module into the shared module, Importing the router module into the shared module give us access to the global routing module.

In each of the component I imported 'MenuController' this gives our app access to use some functionalities for our menu. eg it gives us access to either toggle, open or close our menu box, I also used router even emitter that let us get the page a user is, the essence of this is, when a user visit a page the menu is highlighted, this was made possible creating a class  named '.active-item'

in addition to that  an array of object was created, this array of object has three properties: title, url and icon. inside the let say respondants-menu.component.ts, I use *ngFor to iterate the the array of object, this gives us access to easily add or remove any property without altering out html.

To change any item i.e to either add or remove any item in out menu the array of object named 'page' can be altered to soothe our choice on the list.




Home-page:
welcom-page


Admin Pages:
admin-add-danger
admin-add-respondant
admin-add-unit
admin-dashboard
admin-edit-admin
admin-edit-unit
admin-login
admin-sign-up
admin-verify-danger-map
view-admins
view-respondant-list

Respondant:
emergency-details  n 
respondant-recover-pass n
respondant-edit-details n 
respondant-dashboard
respondant-details
respondant-login
view-emergencies
respondent-add-danger
respondent-view-dangers  
      
    
find-unit  yellow
get-help yellow
unit-alert blue disappeared
user-location yellow
victim-confirm-loc-on-map disappeared
victim-view-unit-on-map none
view-dangers blue
view-unit Blue



view-dangers blue menu
view-unit Blue menu
unit-alert blue disappeared

find-unit  yellow menu
get-help yellow menu
user-location yellow