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