From a946cab18bd68f2c1073dea7dd7a6cef04617bd4 Mon Sep 17 00:00:00 2001
From: Patrick Sun <patrick@lawipac.com>
Date: Mon, 28 Dec 2020 19:26:10 +1100
Subject: [PATCH] menu item color by default goes black

---
 src/app/app.component.html |  9 +++++----
 src/app/app.component.scss | 10 +++++++++-
 src/app/app.component.ts   |  5 +++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index b7b8275..6eabfbc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,10 @@
-<kendo-appbar *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
+<kendo-appbar id='topBar' *ngIf='login' class='appbar' [position]="'top'" [positionMode]="'sticky'">
   <kendo-appbar-section>
     <kendo-menu [items]="items" (select)="onSelect($event)"> 
-      <ng-template kendoMenuItemTemplate let-item="item">
-        <fa-icon  *ngIf="menuItemHasFontawesome(item)"  [icon]="item.fa"></fa-icon> &nbsp;
-        {{ item.text }} 
+      <ng-template kendoMenuItemTemplate let-item="item" >
+        <span class='main-menu-item'>
+          <fa-icon  *ngIf="menuItemHasFontawesome(item)" [icon]="item.fa"></fa-icon> &nbsp;
+        {{ item.text }}  </span>
       </ng-template>
     </kendo-menu>
   </kendo-appbar-section>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index f83c1d5..e6686cd 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -22,4 +22,12 @@
 .appbar,
 .k-appbar-sticky{
     z-index: 1000;
-}
\ No newline at end of file
+}
+
+#topBar .main-menu-item , #topBar .k-icon {
+    color:black !important; 
+}
+
+.k-menu:not(.k-context-menu) > .k-item > .k-state-active {
+    background-color: lightblue; 
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ea9a102..af422f4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LoanEditComponent } from './loan-edit/loan-edit.component';
 
@@ -9,7 +9,8 @@ import { MenuService } from './service/menu.service';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit , OnDestroy {
   title = 'SFM broker';