feat: add context menu on toolbar

.eslintrc.json

@@ -2,7 +2,8 @@
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
         "project": "tsconfig.json",
-        "sourceType": "module"
+        "sourceType": "module",
+        "extraFileExtensions": ["html"]
     },
     "plugins": ["@typescript-eslint/eslint-plugin"],
     "extends": [

src/app/ui/components/toolbar/toolbar.component.html

@@ -20,8 +20,8 @@
             placeholder="{{ 'PAGES.MAIN.SEARCH' | translate }}"
         ></nb-search>
 
-        <button nbButton ghost (click)="goToSettings()" class="back-button">
-            <nb-icon icon="settings-outline"></nb-icon>
+        <button nbButton ghost [nbContextMenu]="contextMenuItems">
+            <nb-icon icon="more-vertical-outline"></nb-icon>
         </button>
     </div>
 </div>

src/app/ui/components/toolbar/toolbar.component.spec.ts

@@ -60,11 +60,4 @@ describe('ToolbarComponent', () => {
 
         expect(mockLocation.back.mock.calls.length).toBe(1);
     });
-
-    it('should go to settings', () => {
-        // TODO: improve this test
-        component.goToSettings();
-
-        expect(mockRouter.navigate.mock.calls[1][0]).toEqual(['settings']);
-    });
 });

src/app/ui/components/toolbar/toolbar.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { NavigationEnd, Router } from '@angular/router';
-import { NbSearchService } from '@nebular/theme';
+import { NbMenuItem, NbSearchService } from '@nebular/theme';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     selector: 'app-toolbar',
@@ -10,16 +11,19 @@ import { NbSearchService } from '@nebular/theme';
 })
 export class ToolbarComponent implements OnInit {
     shouldShowBackButton = false;
+    contextMenuItems: NbMenuItem[] = [];
 
     constructor(
         private location: Location,
         private router: Router,
         private searchService: NbSearchService,
+        private translateService: TranslateService,
     ) {}
 
     ngOnInit(): void {
         this.setupRouterEventsListener();
         this.setupSearchListener();
+        this.setupContextMenuItems().then();
     }
 
     private setupRouterEventsListener(): void {
@@ -40,11 +44,26 @@ export class ToolbarComponent implements OnInit {
         await this.router.navigate(['search', searchTerm]);
     }
 
-    goBack(): void {
-        this.location.back();
+    private async setupContextMenuItems(): Promise<void> {
+        this.contextMenuItems = [
+            {
+                title: await this.getTranslation('PAGES.GET_INVOLVED.TITLE'),
+                icon: 'people-outline',
+                link: 'get-involved',
+            },
+            {
+                title: await this.getTranslation('PAGES.SETTINGS.TITLE'),
+                icon: 'settings-outline',
+                link: 'settings',
+            },
+        ];
+    }
+
+    private getTranslation(key: string): Promise<string> {
+        return this.translateService.get(key).toPromise();
     }
 
-    async goToSettings(): Promise<void> {
-        await this.router.navigate(['settings']);
+    goBack(): void {
+        this.location.back();
     }
 }

src/app/ui/components/toolbar/toolbar.module.ts

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ToolbarComponent } from './toolbar.component';
-import { NbButtonModule, NbIconModule, NbSearchModule } from '@nebular/theme';
+import {
+    NbButtonModule,
+    NbContextMenuModule,
+    NbIconModule,
+    NbSearchModule,
+} from '@nebular/theme';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
@@ -12,6 +17,7 @@ import { TranslateModule } from '@ngx-translate/core';
         NbButtonModule,
         TranslateModule,
         NbSearchModule,
+        NbContextMenuModule,
     ],
     exports: [ToolbarComponent],
 })

src/app/ui/pages/get-involved/get-involved.component.html

@@ -0,0 +1 @@
+<p>get-involved works!</p>

src/app/ui/pages/get-involved/get-involved.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetInvolvedComponent } from './get-involved.component';
+
+describe('GetInvolvedComponent', () => {
+    let component: GetInvolvedComponent;
+    let fixture: ComponentFixture<GetInvolvedComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [GetInvolvedComponent],
+        }).compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(GetInvolvedComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/ui/pages/get-involved/get-involved.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-get-involved',
+    templateUrl: './get-involved.component.html',
+    styleUrls: ['./get-involved.component.scss'],
+})
+export class GetInvolvedComponent {}

src/app/ui/pages/get-involved/get-involved.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GetInvolvedComponent } from './get-involved.component';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [{ path: '', component: GetInvolvedComponent }];
+
+@NgModule({
+    declarations: [GetInvolvedComponent],
+    imports: [CommonModule, RouterModule.forChild(routes)],
+})
+export class GetInvolvedModule {}

src/app/ui/pages/main/main.module.ts

@@ -68,6 +68,13 @@ const routes: Routes = [
                         (m) => m.SettingsModule,
                     ),
             },
+            {
+                path: 'get-involved',
+                loadChildren: () =>
+                    import('../get-involved/get-involved.module').then(
+                        (m) => m.GetInvolvedModule,
+                    ),
+            },
         ],
     },
 ];