Add highlight to selected book, chapter, and verse in nav menu

app/components/book.hbs

@@ -1,2 +1,2 @@
-<a {{on "click" this.selectBook}}>{{this.bookTitle}}</a>
+<a {{on "click" this.selectBook}} class="{{this.selected}}" ...attributes>{{this.bookTitle}}</a>
 

app/components/book.js

@@ -1,7 +1,10 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class BookComponent extends Component {
+  @service('nav-state') navState;
+
   get bookTitle() {
     let string = this.args.book.name.toLowerCase();
     if (this.isNumber(string.charAt(0))) {
@@ -14,6 +17,7 @@ export default class BookComponent extends Component {
   @action
   selectBook() {
     this.args.showChapters(this.args.book);
+    this.navState.setBook(this.args.book);
   }
 
   isNumber(char) {
@@ -26,4 +30,13 @@ export default class BookComponent extends Component {
       return false;
     }
   }
+
+  get
+  selected() {
+    if(this.navState.isCurrentBook(this.args.book)) {
+      return "selected";
+    } else {
+      return "";
+    }
+  }
 }

app/components/chapter-nav.js

@@ -1,9 +1,11 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from "@glimmer/tracking";
+import { inject as service } from '@ember/service';
 
 export default class ChapterNavComponent extends Component {
   @tracked currentChapter;
+  @service('nav-state') navState;
 
   constructor(...args) {
     super(...args);

app/components/chapter.hbs

@@ -1 +1 @@
-<a {{on "click" this.selectChapter}} >{{@chapter.chapter}}</a>
+<a {{on "click" this.selectChapter}} class="{{this.selected}}" ...attributes>{{@chapter.chapter}}</a>

app/components/chapter.js

@@ -1,13 +1,24 @@
 import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+
 
 export default class ChapterComponent extends Component {
-  @tracked selected = false;
+  @service('nav-state') navState;
 
   @action
   selectChapter() {
     this.args.showVerses(this.args.book, this.args.chapter);
-    this.selected = true;
+    this.navState.setChapter(this.args.chapter);
+  }
+
+  get
+  selected() {
+    if(this.navState.isCurrentChapter(this.args.chapter)) {
+      return "selected";
+    } else {
+      return "";
+    }
   }
 }

app/components/verse.hbs

@@ -1 +1 @@
-<a {{on "click" this.selectVerse }}>{{@verse}}</a>
+<a {{on "click" this.selectVerse }} class="{{this.selected}}" ...attributes>{{@verse}}</a>

app/components/verse.js

@@ -1,9 +1,23 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export default class VerseComponent extends Component {
+  @service('nav-state') navState;
+
+
   @action
   selectVerse() {
     this.args.verseSelected(this.args.book, this.args.chapter, this.args.verse);
+    this.navState.setVerse(this.args.verse);
+  }
+
+  get
+  selected() {
+    if(this.navState.isCurrentVerse(this.args.verse)) {
+      return "selected";
+    } else {
+      return "";
+    }
   }
 }

app/services/word-select.js

@@ -24,10 +24,10 @@ export default class WordSelectService extends Service {
   }
 
   isCurrentByOgntId(word) {
-    return word.ogntSort == this.currentWord.ogntSort;
+    return word.ogntSort === this.currentWord.ogntSort;
   }
 
   isCurrentByStrongsNumber(word) {
-    return word.strongs_number == this.currentWord.strongsNumber
+    return word.strongs_number === this.currentWord.strongsNumber
   }
 }

app/styles/components/scrollmenu.scss

@@ -8,6 +8,7 @@ div.scrollmenu {
   width: 100%;
 }
 
+div.scrollmenu .label,
 div.scrollmenu a,
 div.scrollmenu a:not([href]):not([class]) {
   display: inline-block;
@@ -17,6 +18,7 @@ div.scrollmenu a:not([href]):not([class]) {
   text-decoration: none;
 }
 
+div.scrollmenu a.selected,
 div.scrollmenu a:hover {
   background-color: #777;
 }