diff --git a/alfa-client/apps/admin/src/app/app.component.html b/alfa-client/apps/admin/src/app/app.component.html
index adbd608ba83644365146d6b241a20848e473f065..66f83dc085317b14d81ad4a3b54fec85b9f88890 100644
--- a/alfa-client/apps/admin/src/app/app.component.html
+++ b/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="
diff --git a/alfa-client/apps/admin/src/app/app.component.spec.ts b/alfa-client/apps/admin/src/app/app.component.spec.ts
index d46fcd163a436a5334ed8371f003c6dcc7836194..9dc1460ef48786b4278b89bc2fef350c0e5d45f1 100644
--- a/alfa-client/apps/admin/src/app/app.component.spec.ts
+++ b/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);
});
});
diff --git a/alfa-client/apps/admin/src/app/app.module.ts b/alfa-client/apps/admin/src/app/app.module.ts
index 425e65dea56d027a0883b0de1f49249c13e5049b..0c4fd5127eaa8546579fdd4268244081b370da46 100644
--- a/alfa-client/apps/admin/src/app/app.module.ts
+++ b/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,
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 75cf45074d60ef259b865f81f143896ef3c778c1..8adc00f2d8215c5f947d879874ed17e6f190184a 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/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';
@@ -28,6 +30,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';
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6dea03dfe7129ed04306522d12d29453ed1f94e5
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MailboxIconComponent } from './mailbox-icon.component';
+
+describe('MailboxIconComponent', () => {
+ let component: MailboxIconComponent;
+ let fixture: ComponentFixture<MailboxIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [MailboxIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(MailboxIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..84f8f446e56ed21aa7d1dfd2119a673b850897e9
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.component.ts
@@ -0,0 +1,38 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-mailbox-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ [ngClass]="twMerge(iconVariants({ size }), 'stroke-text', class)"
+ >
+ <path
+ d="M20 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V6C22 4.89543 21.1046 4 20 4Z"
+ stroke="black"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7"
+ stroke="black"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>`,
+})
+export class MailboxIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ readonly iconVariants = iconVariants;
+ readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..929efe4f3565fc8df1f71ea6d68f538c68dcbbe6
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/mailbox-icon/mailbox-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { MailboxIconComponent } from './mailbox-icon.component';
+
+const meta: Meta<MailboxIconComponent> = {
+ title: 'Icons/Mailbox icon',
+ component: MailboxIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<MailboxIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'medium' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81b21beded9266c229a3819c7c731f54bb90a1ac
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OrgaUnitIconComponent } from './orga-unit-icon.component';
+
+describe('OrgaUnitIconComponent', () => {
+ let component: OrgaUnitIconComponent;
+ let fixture: ComponentFixture<OrgaUnitIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [OrgaUnitIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(OrgaUnitIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..43885aef2f634a25e2e2eb1cec1d64447d0c0ee0
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.component.ts
@@ -0,0 +1,29 @@
+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-orga-unit-icon',
+ standalone: true,
+ imports: [NgClass],
+ template: `<svg
+ xmlns="http://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ [ngClass]="twMerge(iconVariants({ size }), 'fill-text', class)"
+ >
+ <path
+ fill-rule="evenodd"
+ d="M3 2.25a.75.75 0 0 0 0 1.5v16.5h-.75a.75.75 0 0 0 0 1.5H15v-18a.75.75 0 0 0 0-1.5H3ZM6.75 19.5v-2.25a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 0 1.5h-.75A.75.75 0 0 1 6 6.75ZM6.75 9a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM6 12.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 6a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75Zm-.75 3.75A.75.75 0 0 1 10.5 9h.75a.75.75 0 0 1 0 1.5h-.75a.75.75 0 0 1-.75-.75ZM10.5 12a.75.75 0 0 0 0 1.5h.75a.75.75 0 0 0 0-1.5h-.75ZM16.5 6.75v15h5.25a.75.75 0 0 0 0-1.5H21v-12a.75.75 0 0 0 0-1.5h-4.5Zm1.5 4.5a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Zm.75 2.25a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75v-.008a.75.75 0 0 0-.75-.75h-.008ZM18 17.25a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+ clip-rule="evenodd"
+ />
+ </svg>`,
+})
+export class OrgaUnitIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ readonly iconVariants = iconVariants;
+ readonly twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1c03bf3a672409dc5b363bd2f2ffdb0787e6daa
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/orga-unit-icon/orga-unit-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { OrgaUnitIconComponent } from './orga-unit-icon.component';
+
+const meta: Meta<OrgaUnitIconComponent> = {
+ title: 'Icons/Orgaunit icon',
+ component: OrgaUnitIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<OrgaUnitIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'medium' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f33524b795e39fff7585c3829d8094659429afa2
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.spec.ts
@@ -0,0 +1,64 @@
+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);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ describe('input', () => {
+ describe('caption', () => {
+ it('should set link text', () => {
+ component.caption = 'Test caption';
+ fixture.detectChanges();
+
+ const captionElement: HTMLParagraphElement = getElementFromFixture(
+ fixture,
+ getDataTestIdOf('link-caption'),
+ );
+
+ expect(captionElement.innerHTML).toBe('Test caption');
+ });
+ });
+
+ describe('to', () => {
+ it('should set href', () => {
+ component.to = '/';
+ fixture.detectChanges();
+
+ const linkElement: HTMLAnchorElement = getElementFromFixture(
+ fixture,
+ getDataTestIdOf('link-to-/'),
+ );
+
+ expect(linkElement).toHaveProperty('href');
+ });
+ });
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d5f54907fe995fa082505d3449a236d89b6f4ecb
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/nav-item/nav-item.component.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+ selector: 'ods-nav-item',
+ standalone: true,
+ imports: [CommonModule, RouterLink, RouterLinkActive],
+ 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 border-transparent hover:border-primary',
+ '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" data-test-id="link-caption">{{ caption }}</p>
+ </a>`,
+})
+export class NavItemComponent {
+ @Input({ required: true }) caption!: string;
+ @Input() to: string;
+}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b507306575a10ab3c396eb6680e25e9c8565d472
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.spec.ts
@@ -0,0 +1,21 @@
+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();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..434dfd07e04e16bcb5c8c36a5b6e975e8fdfe2f9
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.component.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'ods-navbar',
+ standalone: true,
+ imports: [CommonModule],
+ 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 {}
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fa5b213b2e0f14fe9de3643ce21e123f042df68c
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -0,0 +1,43 @@
+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';
+
+const meta: Meta<NavbarComponent> = {
+ title: 'Navbar',
+ component: NavbarComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+ decorators: [
+ applicationConfig({
+ providers: [importProvidersFrom(RouterModule.forRoot([]))],
+ }),
+ moduleMetadata({
+ imports: [NavItemComponent, OfficeIconComponent],
+ providers: [
+ {
+ provide: APP_BASE_HREF,
+ useValue: '/',
+ },
+ ],
+ }),
+ ],
+};
+
+export default meta;
+type Story = StoryObj<NavbarComponent>;
+
+export const Default: Story = {
+ args: {},
+ render: () => ({
+ 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>`,
+ }),
+};
diff --git a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js b/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
index f998ef819768fb984e0e5c28789c3b93f769497c..cb8ed07e1d8c25e88620f6a60df143c9e7da8dfb 100644
--- a/alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js
+++ b/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>)',
},