OZG-6108 Use new components for nav bar

alfa-client/apps/admin/src/app/app.component.html

@@ -16,12 +16,16 @@
     ></user-profile-button-container>
   </header>
   <div class="flex h-screen w-full justify-center overflow-y-auto">
-    <nav class="h-full w-72 bg-slate-100 p-4">
-      <admin-navigation
-        *ngIf="apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION"
-        data-test-id="navigation"
-      ></admin-navigation>
-    </nav>
+    <ods-navbar data-test-id="navigation">
+      <ng-container *ngIf="apiRoot | hasLink: ApiRootLinkRel.CONFIGURATION">
+        <ods-nav-item caption="Organisationseinheiten" to="/organisationseinheiten">
+          <ods-orga-unit-icon icon />
+        </ods-nav-item>
+        <ods-nav-item caption="Postfach" to="/postfach">
+          <ods-mailbox-icon icon />
+        </ods-nav-item>
+      </ng-container>
+    </ods-navbar>
     <main class="flex-1 overflow-y-auto bg-white px-6 py-4">
       <router-outlet
         *ngIf="

alfa-client/apps/admin/src/app/app.component.spec.ts

@@ -14,7 +14,13 @@ import {
 } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router, RouterOutlet } from '@angular/router';
-import { AdminLogoIconComponent } from '@ods/system';
+import {
+  AdminLogoIconComponent,
+  MailboxIconComponent,
+  NavItemComponent,
+  NavbarComponent,
+  OrgaUnitIconComponent,
+} from '@ods/system';
 import { AuthenticationService } from 'authentication';
 import { NavigationComponent } from 'libs/admin-settings/src/lib/navigation/navigation.component';
 import { createApiRootResource } from 'libs/api-root-shared/test/api-root';
@@ -50,8 +56,12 @@ describe('AppComponent', () => {
         AppComponent,
         MockComponent(NavigationComponent),
         MockComponent(AdminLogoIconComponent),
+        MockComponent(OrgaUnitIconComponent),
+        MockComponent(MailboxIconComponent),
         MockComponent(UserProfileButtonContainerComponent),
         MockComponent(UnavailablePageComponent),
+        MockComponent(NavbarComponent),
+        MockComponent(NavItemComponent),
         HasLinkPipe,
         MockDirective(RouterOutlet),
       ],
@@ -149,20 +159,24 @@ describe('AppComponent', () => {
 
   describe('navigation', () => {
     beforeEach(() => {});
-    it('should exist if configuration link exists', () => {
+    it('should show links if configuration link exists', () => {
       component.apiRootStateResource$ = of(
         createStateResource(createApiRootResource([ApiRootLinkRel.CONFIGURATION])),
       );
-
       fixture.detectChanges();
 
-      existsAsHtmlElement(fixture, navigationSelector);
+      const navbarElement: HTMLElement = getElementFromFixture(fixture, navigationSelector);
+
+      expect(navbarElement.children.length).toBeGreaterThan(0);
     });
 
-    it('should not exist if configuration resource not available', () => {
+    it('should not not show links if configuration resource not available', () => {
+      component.apiRootStateResource$ = of(createStateResource(createApiRootResource([])));
       fixture.detectChanges();
 
-      notExistsAsHtmlElement(fixture, navigationSelector);
+      const navbarElement: HTMLElement = getElementFromFixture(fixture, navigationSelector);
+
+      expect(navbarElement.children.length).toBe(0);
     });
   });
 

alfa-client/apps/admin/src/app/app.module.ts

@@ -16,6 +16,10 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {
   AdminLogoIconComponent,
   LogoutIconComponent,
+  MailboxIconComponent,
+  NavItemComponent,
+  NavbarComponent,
+  OrgaUnitIconComponent,
   PopupComponent,
   PopupListItemComponent,
 } from '@ods/system';
@@ -42,7 +46,11 @@ import { appRoutes } from './app.routes';
     AdminLogoIconComponent,
     PopupComponent,
     PopupListItemComponent,
+    NavItemComponent,
+    NavbarComponent,
+    OrgaUnitIconComponent,
     LogoutIconComponent,
+    MailboxIconComponent,
     RouterModule.forRoot(appRoutes),
     BrowserModule,
     BrowserAnimationsModule,

alfa-client/libs/design-system/src/index.ts

@@ -20,7 +20,9 @@ export * from './lib/icons/exclamation-icon/exclamation-icon.component';
 export * from './lib/icons/file-icon/file-icon.component';
 export * from './lib/icons/iconVariants';
 export * from './lib/icons/logout-icon/logout-icon.component';
+export * from './lib/icons/mailbox-icon/mailbox-icon.component';
 export * from './lib/icons/office-icon/office-icon.component';
+export * from './lib/icons/orga-unit-icon/orga-unit-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';

alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts

+import { getElementFromFixture, Mock, mock } from '@alfa-client/test-utils';
+import { importProvidersFrom } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router, RouterModule } from '@angular/router';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { NavItemComponent } from './nav-item.component';
 
 describe('NavItemComponent', () => {
   let component: NavItemComponent;
   let fixture: ComponentFixture<NavItemComponent>;
 
+  const router: Mock<Router> = mock(Router);
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [NavItemComponent],
+      providers: [
+        {
+          provide: Router,
+          useValue: router,
+        },
+        importProvidersFrom(RouterModule.forRoot([])),
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(NavItemComponent);
@@ -18,4 +31,15 @@ describe('NavItemComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('routerLink', () => {
+    it('should set href', () => {
+      component.to = '/';
+      fixture.detectChanges();
+
+      const linkElement = getElementFromFixture(fixture, getDataTestIdOf('link-to-/'));
+
+      expect(linkElement).toHaveProperty('href');
+    });
+  });
 });

alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts

 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'ods-nav-item',
   standalone: true,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterLink, RouterLinkActive],
   template: `<a
     [routerLink]="to"
     routerLinkActive="bg-selected-light border-selected"
@@ -15,6 +15,7 @@ import { RouterModule } from '@angular/router';
       'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
     ]"
     role="menuitem"
+    [attr.data-test-id]="'link-to-' + to"
   >
     <ng-content select="[icon]" />
     <p class="text-left text-sm text-text">{{ caption }}</p>

alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts

@@ -36,6 +36,7 @@ export const Default: Story = {
     template: `<ods-navbar>
       <ods-nav-item caption="First link" to="/"><ods-office-icon icon /></ods-nav-item>
       <ods-nav-item caption="Second link" to="/second"><ods-office-icon icon /></ods-nav-item>
+      <hr />
       <ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
     </ods-navbar>`,
   }),