OZG-6108 Add navigation components

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

@@ -28,6 +28,8 @@ export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/icons/stamp-icon/stamp-icon.component';
 export * from './lib/instant-search/instant-search/instant-search.component';
 export * from './lib/instant-search/instant-search/instant-search.model';
+export * from './lib/navbar/nav-item/nav-item.component';
+export * from './lib/navbar/navbar/navbar.component';
 export * from './lib/popup/popup-list-item/popup-list-item.component';
 export * from './lib/popup/popup/popup.component';
 export * from './lib/testbtn/testbtn.component';

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavItemComponent } from './nav-item.component';
+
+describe('NavItemComponent', () => {
+  let component: NavItemComponent;
+  let fixture: ComponentFixture<NavItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavItemComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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';
+
+@Component({
+  selector: 'ods-nav-item',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<a
+    [routerLink]="to"
+    [ngClass]="[
+      'flex min-h-8 items-center gap-2 rounded-2xl px-4 py-2',
+      'border-2 border-transparent hover:border-primary',
+      'outline-2 outline-offset-2 focus-visible:outline-focus',
+    ]"
+  >
+    <ng-content select="[icon]" />
+    <p class="text-left text-sm text-text">{{ caption }}</p>
+  </a>`,
+})
+export class NavItemComponent {
+  @Input({ required: true }) caption!: string;
+  @Input() to: string;
+}

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavbarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ods-navbar',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<nav class="flex h-full w-72 flex-col gap-1 bg-ozggray p-4">
+    <ng-content />
+  </nav>`,
+})
+export class NavbarComponent {}

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

+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { OfficeIconComponent } from '../../icons/office-icon/office-icon.component';
+import { NavItemComponent } from '../nav-item/nav-item.component';
+import { NavbarComponent } from './navbar.component';
+
+const meta: Meta<NavbarComponent> = {
+  title: 'Navbar',
+  component: NavbarComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [NavItemComponent, OfficeIconComponent],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<NavbarComponent>;
+
+export const Default: Story = {
+  args: {},
+  render: () => ({
+    template: `<ods-navbar>
+      <ods-nav-item caption="First link"><ods-office-icon icon /></ods-nav-item>
+      <ods-nav-item caption="Second link"><ods-office-icon icon /></ods-nav-item>
+      <ods-nav-item caption="Third link"><ods-office-icon icon /></ods-nav-item>
+    </ods-navbar>`,
+  }),
+};