Added collapsing to the side nav menus [#667]

comixed · Apr 24, 2021 · fd590f1 · fd590f1
1 parent d422374
commit fd590f1
Show file tree

Hide file tree

Showing 3 changed files with 168 additions and 81 deletions.
diff --git a/comixed-web/src/app/components/side-navigation/side-navigation.component.html b/comixed-web/src/app/components/side-navigation/side-navigation.component.html
@@ -1,95 +1,128 @@
 <div fxLayout="column">
   <mat-nav-list>
-    <h3 matSubheader>{{ "navigation.heading.comics" | translate }}</h3>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/comics/all"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.all-comics" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/comics/unread"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.unread-comics" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/comics/deleted"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.deleted-comics" | translate }}
-    </a>
-    <a
-      *ngIf="isAdmin"
-      mat-list-item
-      routerLink="/admin/import"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.import-comics" | translate }}
-    </a>
+    <h3 matSubheader>
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="onCollapseComics(!comicsCollapsed)"
+      >
+        <mat-icon *ngIf="comicsCollapsed">expand_less</mat-icon>
+        <mat-icon *ngIf="!comicsCollapsed">expand_more</mat-icon>
+      </button>
+      {{ "navigation.heading.comics" | translate }}
+    </h3>
+    <mat-nav-list *ngIf="!comicsCollapsed">
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/comics/all"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.all-comics" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/comics/unread"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.unread-comics" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/comics/deleted"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.deleted-comics" | translate }}
+      </a>
+      <a
+        *ngIf="isAdmin"
+        mat-list-item
+        routerLink="/admin/import"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.import-comics" | translate }}
+      </a>
+    </mat-nav-list>
 
     <h3 *ngIf="!!user" matSubheader>
+      <button
+        id="collapse-collections-button"
+        mat-icon-button
+        color="primary"
+        (click)="onCollapseCollection(!collectionCollapsed)"
+      >
+        <mat-icon *ngIf="collectionCollapsed">expand_less</mat-icon>
+        <mat-icon *ngIf="!collectionCollapsed">expand_more</mat-icon>
+      </button>
       {{ "navigation.heading.collections" | translate }}
     </h3>
 
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/publishers"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.publisher-collection" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/series"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.series-collection" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/characters"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.character-collection" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/teams"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.team-collection" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/locations"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.location-collection" | translate }}
-    </a>
-    <a
-      *ngIf="!!user"
-      mat-list-item
-      routerLink="/library/collections/stories"
-      routerLinkActive="active"
-    >
-      {{ "navigation.option.story-collection" | translate }}
-    </a>
+    <mat-nav-list *ngIf="!collectionCollapsed">
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/publishers"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.publisher-collection" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/series"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.series-collection" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/characters"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.character-collection" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/teams"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.team-collection" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/locations"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.location-collection" | translate }}
+      </a>
+      <a
+        *ngIf="!!user"
+        mat-list-item
+        routerLink="/library/collections/stories"
+        routerLinkActive="active"
+      >
+        {{ "navigation.option.story-collection" | translate }}
+      </a>
+    </mat-nav-list>
 
     <h3 *ngIf="!!user" matSubheader>
+      <button
+        mat-icon-button
+        color="primary"
+        [disabled]="true"
+        (click)="onCollapseReadingLists(!readingListsCollapsed)"
+      >
+        <mat-icon *ngIf="readingListsCollapsed">expand_less</mat-icon>
+        <mat-icon *ngIf="!readingListsCollapsed">expand_more</mat-icon>
+      </button>
       {{ "navigation.heading.reading-lists" | translate }}
     </h3>
+    <!-- mat-nav-list *ngIf="!readingListsCollapsed"></mat-nav-list -->
 
     <h3 *ngIf="!!user" matSubheader>
       {{ "navigation.heading.account" | translate }}

diff --git a/comixed-web/src/app/components/side-navigation/side-navigation.component.spec.ts b/comixed-web/src/app/components/side-navigation/side-navigation.component.spec.ts
@@ -59,4 +59,43 @@ describe('SideNavigationComponent', () => {
       expect(component.isAdmin).toBeFalse();
     });
   });
+
+  describe('toggling the comic lists', () => {
+    const COLLAPSED = Math.random() > 0.5;
+
+    beforeEach(() => {
+      component.comicsCollapsed = !COLLAPSED;
+      component.onCollapseComics(COLLAPSED);
+    });
+
+    it('updates the flag', () => {
+      expect(component.comicsCollapsed).toEqual(COLLAPSED);
+    });
+  });
+
+  describe('toggling the collection lists', () => {
+    const COLLAPSED = Math.random() > 0.5;
+
+    beforeEach(() => {
+      component.collectionCollapsed = !COLLAPSED;
+      component.onCollapseCollection(COLLAPSED);
+    });
+
+    it('updates the flag', () => {
+      expect(component.collectionCollapsed).toEqual(COLLAPSED);
+    });
+  });
+
+  describe('toggling the reading lists', () => {
+    const COLLAPSED = Math.random() > 0.5;
+
+    beforeEach(() => {
+      component.readingListsCollapsed = !COLLAPSED;
+      component.onCollapseReadingLists(COLLAPSED);
+    });
+
+    it('updates the flag', () => {
+      expect(component.readingListsCollapsed).toEqual(COLLAPSED);
+    });
+  });
 });
diff --git a/comixed-web/src/app/components/side-navigation/side-navigation.component.ts b/comixed-web/src/app/components/side-navigation/side-navigation.component.ts
@@ -28,6 +28,9 @@ import { LoggerService } from '@angular-ru/logger';
 })
 export class SideNavigationComponent implements OnInit {
   isAdmin = false;
+  comicsCollapsed = false;
+  collectionCollapsed = false;
+  readingListsCollapsed = false;
 
   constructor(private logger: LoggerService) {}
 
@@ -44,4 +47,16 @@ export class SideNavigationComponent implements OnInit {
   }
 
   ngOnInit(): void {}
+
+  onCollapseComics(collapsed: boolean): void {
+    this.comicsCollapsed = collapsed;
+  }
+
+  onCollapseCollection(collapsed: boolean): void {
+    this.collectionCollapsed = collapsed;
+  }
+
+  onCollapseReadingLists(collapsed: boolean): void {
+    this.readingListsCollapsed = collapsed;
+  }
 }