<nav class="scripture-menu navbar navbar-dark sticky-top">
  <a href="#" title="Go to the previous verse">
  <svg xmlns="http://www.w3.org/2000/svg" fill="#dadada" class="bi bi-arrow-left-square ml-auto" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
  </svg>
  </a> 
    <div class="container w-75">
      <Scrollmenu @visible="true">
        {{#each this.books as |book|}}
          <Book @book={{book}} @showChapters={{this.showChapters}} />
        {{/each}}
      </Scrollmenu>

      <ChapterNav @book={{this.currentBook}}
                  @showVerses={{this.showVerses}}
                  @visible={{this.chaptersVisible}} />

      <VerseNav @book={{this.currentBook}}
                @chapter={{this.currentChapter}}
                @verses={{this.currentChapter.verses}}
                @verseSelected={{this.verseSelected}}
                @visible={{this.versesVisible}} />
    </div>
  <a href="#" title="Go to the next verse">
  <svg xmlns="http://www.w3.org/2000/svg" fill="#dadada" class="bi bi-arrow-right-square mr-auto" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4.5 5.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
  </svg>
  </a>
</nav>