tellit sidebar html

<ng-template #deleteTemplate>
  <div class="modal-header">
    <h3 class="modal-title">Are you sure?</h3>
  </div>
  <div class="modal-body">
    <div class="modal-text text-center">
      <span>Are you sure? You cannot undo it.</span>
    </div>
  </div>
  <div class="modal-footer text-center">
    <button class="btn btn-info" (click)="confirmDelete(false)">CANCEL</button>
    <button class="btn btn-danger" (click)="confirmDelete(true)">DELETE</button>
  </div>
</ng-template>

<nav class="sidebar bg-gdark">
  <ul class="nav nav-pills flex-column">
    <button type="button" class="btn btn-gdark" (click)="isCollapsedStory = !isCollapsedStory">My stories
    </button>
    <div [collapse]="isCollapsedStory" class="card card-block card-header listCover">
      <div *ngFor="let story of storyList" class="row storyList myList">
        <div class="col-7">
          <a [routerLink]="['/story', story.id]">
            <div class="well well-lg story">{{story.title}}
            </div>
          </a>
        </div>
        <div class="col">
          <a [routerLink]="['/story', story.id]">
            <i class="fa fa-pencil" aria-hidden="true"></i>
          </a>
          &emsp;
          <a (click)="showDeleteModal(deleteTemplate, story)">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-gdark" (click)="isCollapsedChapter = !isCollapsedChapter">My Chapters
    </button>
    <div [collapse]="!isCollapsedChapter" class="card card-block card-header">
      <div *ngFor="let chapter of chapterList" class="row chapterList myList">
        <div class="col-7">
          <a [routerLink]="['chapter', chapter.id]">
            {{chapter.title}}
          </a>
        </div>
        <div class="col">
          <a [routerLink]="['/chapter', chapter.id]">
            <i class="fa fa-pencil" aria-hidden="true"></i>
          </a>
          &emsp;
          <a (click)="showDeleteModal(deleteTemplate, chapter)">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-gdark" (click)="isCollapsedBookmark = !isCollapsedBookmark">Bookmarks
    </button>
    <div [collapse]="!isCollapsedBookmark" class="card card-block card-header">
      <div *ngFor="let bookmark of bookmarkList" class="row bookmarkList myList">
        <div class="col-9">
          <a [routerLink]="['/chapter', bookmark.chapterId]">
            {{bookmark.chapterName}}
          </a>
        </div>
        <div class="col">
          <a (click)="showDeleteModal(deleteTemplate, bookmark)">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>
  </ul>