OZG-6108 Fix story and add styling

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';
 
 @Component({
   selector: 'ods-nav-item',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   template: `<a
     [routerLink]="to"
+    routerLinkActive="bg-selected-light border-selected"
     [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',
+      'border border-transparent hover:border-primary',
+      'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
     ]"
+    role="menuitem"
   >
     <ng-content select="[icon]" />
     <p class="text-left text-sm text-text">{{ caption }}</p>

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

@@ -5,8 +5,10 @@ import { Component } from '@angular/core';
   selector: 'ods-navbar',
   standalone: true,
   imports: [CommonModule],
-  template: `<nav class="flex h-full w-72 flex-col gap-1 bg-ozggray p-4">
+  template: `<nav class="h-full w-72 bg-ozggray p-4">
+    <div class="flex flex-col gap-2" role="menubar">
       <ng-content />
+    </div>
   </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 { APP_BASE_HREF } from '@angular/common';
+import { importProvidersFrom } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { applicationConfig, 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';
@@ -9,8 +12,17 @@ const meta: Meta<NavbarComponent> = {
   excludeStories: /.*Data$/,
   tags: ['autodocs'],
   decorators: [
+    applicationConfig({
+      providers: [importProvidersFrom(RouterModule.forRoot([]))],
+    }),
     moduleMetadata({
       imports: [NavItemComponent, OfficeIconComponent],
+      providers: [
+        {
+          provide: APP_BASE_HREF,
+          useValue: '/',
+        },
+      ],
     }),
   ],
 };
@@ -22,9 +34,9 @@ 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-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>
+      <ods-nav-item caption="Third link" to="/third"><ods-office-icon icon /></ods-nav-item>
     </ods-navbar>`,
   }),
 };

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -94,6 +94,10 @@ module.exports = {
           700: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-abgelehnt-500) / <alpha-value>)',
         },
+        selected: {
+          light: 'hsl(212, 58%, 94%)',
+          DEFAULT: 'hsl(216, 85%, 34%)',
+        },
         pdf: {
           DEFAULT: 'hsl(var(--color-pdf) / <alpha-value>)',
         },