side-navigation.component.html

<h4 class="section-title" *ngIf="!!user">
  {{ "navigation.heading.comics" | translate }}
</h4>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/all"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>local_library</mat-icon>
  <span>{{ "navigation.option.all-comics" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/unprocessed"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>incomplete_circle</mat-icon>
  <span>{{ "navigation.option.unprocessed-comics" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/unread"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>read_more</mat-icon>
  <span>{{ "navigation.option.unread-comics" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/unscraped"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>cloud_download</mat-icon>
  <span>{{ "navigation.option.unscraped-comics" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/import"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>publish</mat-icon>
  <span>{{ "navigation.option.import-comics" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/deleted"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>delete_sweep</mat-icon>
  <span>{{ "navigation.option.deleted-comics" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/pages/duplicates"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>control_point_duplicate</mat-icon>
  <span>{{ "navigation.option.duplicate-pages" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/library/pages/blocked"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>block</mat-icon>
  <span>{{ "navigation.option.blocked-hashs" | translate }}</span>
</button>

<mat-divider *ngIf="!!user"></mat-divider>

<h4 class="section-title" *ngIf="!!user">
  {{ "navigation.heading.collections" | translate }}
</h4>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/publishers"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>business</mat-icon>
  <span>{{ "navigation.option.publisher-collection" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/series"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>auto_stories</mat-icon>
  <span>{{ "navigation.option.series-collection" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/characters"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>person_outline</mat-icon>
  <span>{{ "navigation.option.character-collection" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/teams"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>people</mat-icon>
  <span>{{ "navigation.option.team-collection" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/locations"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>place</mat-icon>
  <span>{{ "navigation.option.location-collection" | translate }}</span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/library/collections/stories"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>layers</mat-icon>
  <span>{{ "navigation.option.story-collection" | translate }}</span>
</button>

<mat-divider *ngIf="!!user"></mat-divider>

<h4 class="section-title" *ngIf="!!user">
  {{ "navigation.heading.reading-lists" | translate }}
</h4>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/lists/reading/all"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>library_add</mat-icon>
  <span>
    {{ "navigation.heading.reading-lists" | translate }}
  </span>
</button>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/lists/stories/names"
  routerLinkActive="active"
>
  <mat-icon>auto_stories</mat-icon>
  <span>{{ "navigation.option.story-names" | translate }}</span>
</button>

<button
  *ngFor="let list of readingLists"
  mat-button
  class="menu-button"
  [routerLink]="['/lists', 'reading', list.id]"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>format_list_numbered_rtl</mat-icon>
  <span class="cx-text-nowrap">{{ list.name }}</span>
</button>

<mat-divider *ngIf="!!user"></mat-divider>

<h4 class="section-title" *ngIf="!!user">
  {{ "navigation.heading.account" | translate }}
</h4>

<button
  *ngIf="!!user"
  mat-button
  class="menu-button"
  routerLink="/account/preferences"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>account_circle</mat-icon>
  <span>{{ "navigation.option.user-preferences" | translate }}</span>
</button>

<mat-divider *ngIf="isAdmin"></mat-divider>

<h4 class="section-title" *ngIf="isAdmin">
  {{ "navigation.heading.admin" | translate }}
</h4>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/admin/configuration"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>settings</mat-icon>
  <span>{{ "navigation.option.configuration" | translate }}</span>
</button>

<button
  *ngIf="isAdmin"
  mat-button
  class="menu-button"
  routerLink="/admin/audit/web"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>list</mat-icon>
  <span>{{ "navigation.option.web-audit-log" | translate }}</span>
</button>

<mat-divider *ngIf="!!user"></mat-divider>

<h4 class="section-title">
  {{ "navigation.heading.system-status" | translate }}
</h4>

<button
  mat-button
  class="menu-button"
  routerLink="/build"
  [queryParams]="queryParams"
  routerLinkActive="active"
>
  <mat-icon>list</mat-icon>
  <span>{{ "navigation.option.build-details" | translate }}</span>
</button>