Merge pull request yannbf#16 from Fdom92/feature/fdom/highlight-item

yannbf · web-flow · commit 2612024478c7 · 2017-03-05T16:45:05.000-03:00
Adds highlight on selected menu item
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -14,34 +14,42 @@ import { StatusBar, Splashscreen } from 'ionic-native';
 
 import { HomePage } from '../pages/_home/home';
 
+import { Subject } from 'rxjs';
+
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
   @ViewChild(Nav) nav: Nav;
 
   rootPage: any = HomePage;
+  activePage = new Subject();
 
-  pages: Array<{ title: string, component: any }>;
+  pages: Array<{ title: string, component: any, active: boolean }>;
   state: any;
 
   constructor(public platform: Platform, public global: AppState) {
     this.initializeApp();
 
     this.pages = [
-      { title: 'Home', component: HomePage },
-      { title: 'Ionic Official Components', component: IonicOfficialComponentsPage },
-      { title: 'Login', component: LoginListPage },
-      { title: 'Lists', component: ListsPage },
-      { title: 'Popup Modal', component: PopupModalsPage },
-      { title: 'Miscellaneous', component: MiscellaneousListPage },
-      { title: 'Popup Menu', component: PopupMenuListPage },
-      { title: 'Profile', component: ProfileListPage },
+      { title: 'Home', component: HomePage, active: true },
+      { title: 'Ionic Official Components', component: IonicOfficialComponentsPage, active: false },
+      { title: 'Login', component: LoginListPage, active: false },
+      { title: 'Lists', component: ListsPage, active: false },
+      { title: 'Popup Modal', component: PopupModalsPage, active: false },
+      { title: 'Miscellaneous', component: MiscellaneousListPage, active: false },
+      { title: 'Popup Menu', component: PopupMenuListPage, active: false },
+      { title: 'Profile', component: ProfileListPage, active: false },
       // Removed for now as there were breaking changes in slides
       // { title: 'Slides', component: SlidesPage },
-      { title: 'Theming', component: ThemingPage },
+      { title: 'Theming', component: ThemingPage, active: false },
     ];
 
+    this.activePage.subscribe((selectedPage: any) => {
+          this.pages.map(page => {
+            page.active = page.title === selectedPage.title;
+          });
+    });
   }
 
   initializeApp() {
@@ -58,5 +66,6 @@ export class MyApp {
     // Reset the content nav to have just this page
     // we wouldn't want the back button to show in this scenario
     this.nav.setRoot(page.component);
+    this.activePage.next(page);
   }
 }
diff --git a/src/app/app.html b/src/app/app.html
@@ -7,7 +7,7 @@
     </ion-header>
     <ion-content>
       <ion-list>
-        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
+        <button menuClose ion-item *ngFor="let p of pages" [class.highlight]="p.active" (click)="openPage(p)">
         {{p.title}}
       </button>
       </ion-list>
diff --git a/src/app/app.scss b/src/app/app.scss
@@ -19,6 +19,10 @@
   text-align: center;
 }
 
+.highlight {
+  background-color: #f4f4f4;
+}
+
 .center {
   display: block;
   margin: 0 auto;
