[PM-30473] Add links to tools in the sidebar (#18217)

* Add links to tools in the sidebar

* Fix test

apps/desktop/src/app/layout/desktop-layout.component.html

@@ -1,9 +1,13 @@
 <bit-layout class="!tw-h-full">
   <app-side-nav slot="side-nav">
-    <bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
+    <bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n" />
 
-    <bit-nav-item icon="bwi-vault" [text]="'vault' | i18n" route="new-vault"></bit-nav-item>
-    <app-send-filters-nav></app-send-filters-nav>
+    <bit-nav-item icon="bwi-vault" [text]="'vault' | i18n" route="new-vault" />
+    <app-send-filters-nav />
+
+    <bit-nav-item icon="bwi-generate" [text]="'generator' | i18n" (click)="openGenerator()" />
+    <bit-nav-item icon="bwi-import" [text]="'importNoun' | i18n" (click)="openImport()" />
+    <bit-nav-item icon="bwi-download" [text]="'exportNoun' | i18n" (click)="openExport()" />
   </app-side-nav>
 
   <router-outlet></router-outlet>

apps/desktop/src/app/layout/desktop-layout.component.spec.ts

@@ -5,7 +5,7 @@ import { mock } from "jest-mock-extended";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { FakeGlobalStateProvider } from "@bitwarden/common/spec";
-import { NavigationModule } from "@bitwarden/components";
+import { DialogService, NavigationModule } from "@bitwarden/components";
 import { GlobalStateProvider } from "@bitwarden/state";
 
 import { SendFiltersNavComponent } from "../tools/send-v2/send-filters-nav.component";
@@ -52,6 +52,10 @@ describe("DesktopLayoutComponent", () => {
           provide: GlobalStateProvider,
           useValue: fakeGlobalStateProvider,
         },
+        {
+          provide: DialogService,
+          useValue: mock<DialogService>(),
+        },
       ],
     })
       .overrideComponent(DesktopLayoutComponent, {

apps/desktop/src/app/layout/desktop-layout.component.ts

@@ -1,10 +1,13 @@
-import { Component } from "@angular/core";
+import { Component, inject } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import { PasswordManagerLogo } from "@bitwarden/assets/svg";
-import { LayoutComponent, NavigationModule } from "@bitwarden/components";
+import { DialogService, LayoutComponent, NavigationModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
+import { ExportDesktopComponent } from "../tools/export/export-desktop.component";
+import { CredentialGeneratorComponent } from "../tools/generator/credential-generator.component";
+import { ImportDesktopComponent } from "../tools/import/import-desktop.component";
 import { SendFiltersNavComponent } from "../tools/send-v2/send-filters-nav.component";
 
 import { DesktopSideNavComponent } from "./desktop-side-nav.component";
@@ -24,5 +27,19 @@ import { DesktopSideNavComponent } from "./desktop-side-nav.component";
   templateUrl: "./desktop-layout.component.html",
 })
 export class DesktopLayoutComponent {
+  private dialogService = inject(DialogService);
+
   protected readonly logo = PasswordManagerLogo;
+
+  protected openGenerator() {
+    this.dialogService.open(CredentialGeneratorComponent);
+  }
+
+  protected openImport() {
+    this.dialogService.open(ImportDesktopComponent);
+  }
+
+  protected openExport() {
+    this.dialogService.open(ExportDesktopComponent);
+  }
 }