# IT Lab App Header
> Diese Library funktioniert nur mit Vue v3

> Um diese Library zu verwenden, wird zusätzlich das [IT Lab Theme System](https://www.npmjs.org/package/itlab-theme-system) empfohlen, um die benötigten CSS Variablen für die Farbgebung automatisch zu setzen

[![npm version](https://img.shields.io/npm/v/itlab-app-header.svg?style=flat-square)](https://www.npmjs.org/package/itlab-app-header)
[![install size](https://packagephobia.now.sh/badge?p=itlab-app-header)](https://packagephobia.now.sh/result?p=itlab-app-header)
[![npm downloads](https://img.shields.io/npm/dm/itlab-app-header.svg?style=flat-square)](http://npm-stat.com/charts.html?package=itlab-app-header)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/itlab-app-header/badge?style=rounded)](https://www.jsdelivr.com/package/npm/itlab-app-header)

Navigationsleiste der einzelnen Unterseite

# Installation

```bash
yarn add itlab-app-header
```

Importieren des Plugins in der main-Datei
```ts
// main.ts
import { createApp } from 'vue';
import App from './App.vue'

import { ITLabAppHeaderPlugin } from 'itlab-app-header';

const app = createApp(App);

app.use(ITLabAppHeaderPlugin);
```

Andernfalls können die Komponenten auch einzeln importiert und eingesetzt werden
```ts
import { createApp } from 'vue';
import App from './App.vue'

import { ITLabAppHeader, ITLabAppHeaderButton } from 'itlab-app-header';

const app = createApp(App);

app.component('itlab-app-header', ITLabAppHeader);
app.component('itlab-app-header-button', ITLabAppHeaderButton);

```

# Liste der verfügbaren Componenten

## itlab-app-header
**Props**
|Name|Typ|Beschreibung|
|:-|:-|:-|
|breakpoint|number (default: 600)|Ab welcher Bildschirmbreite, können nicht mehr alle Elemente ohne Umbruch angezeigt werden. Danach wird ein faltbares Menu stattdessen angezeigt|

**Slots**
|Name|Beschreibung|
|:-|:-|
|default|Hier werden die einzelnen Elemente der Navigationsleiste gesetzt (a, href, router-link, etc.)|
|title|Hierüber kann der Titel (links) angepasst werden. Auch hier kann nur Text oder auch Text + SVG verwendet werden|
|static|Über diesen Slot können Elemente in der Navigationsleiste gesetzt werden, die im Falle des Erreichens des Breakpoints (statisch) erhalten bleiben und somit nicht ins faltbare Menu verschoben werden|

## itlab-app-header-button

**Props**
|Name|Typ|Beschreibung|
|:-|:-|:-|
|routeName|String|Name der Route, zu der bei einem Klick navigiert werden soll|
|href|String|Link, der bei einem Klick geöffnet wird|
|to|RawLocation|Eine geneuere Route, zu der bei einem Klick navigiert werden soll|

**Events**
|Name|Typ|Rückgabewert|
|:-|:-|:-|
|click|MouseEvent|void|

**Slots**
|Name|Beschreibung|
|:-|:-|
|default|Text und/oder SVG Icon innerhalb des Knopes|