import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
import '../../stories/styles/shared.css';
import * as HeaderNavigationBarStories from "./HeaderNavigationBar.stories";

<Meta of={HeaderNavigationBarStories} />

# HeaderNavigationBar

Le composant `HeaderNavigationBar` est un composant de navigation qui permet de naviguer entre les différentes pages de l'application.

Il est basé sur les composants `HeaderBar` et `HeaderBurgerMenu` du design system.

Ce composant propose une navigation à l'aide d'un menu horizontal en mode desktop, ce qui peut être utile pour les produits ayant peu de pages et destinés aux agents.

Si vous n'avez pas besoin du menu horizontal, vous devriez utiliser le composant `HeaderBar` directement.

Il est conseillé de ne pas utiliser le menu horizontal pour afficher plus de 6 liens. Vous pouvez configurer le nombre de liens affichés dans le menu horizontal en utilisant la prop `maxHorizontalMenuItems`. Au-delà de ce chiffre, le menu passera en mode burger. Par défaut, le menu horizontal affiche au maximum six items.

<Canvas of={HeaderNavigationBarStories.Default} />

## API

<Controls of={HeaderNavigationBarStories.Default} />

## Exemple d'utilisation

<Source
  dark
  code={`
<HeaderNavigationBar
	home-aria-label="Home"
	service-title="Synapse"
	service-subtitle="design system de la CNAM"
	:sticky="true"
	:items="[
		{ label: 'Home', to: '/' },
		{ label: 'About', to: '/about' },
		{ label: 'Services', to: '/services' },
		{ label: 'Contact', to: '/contact' },
		{ label: 'Blog', to: '/blog' },
	]"
/>
`}
/>

## Les slots

### HeaderSide

Le slot `header-side` permet d'ajouter du contenu à droite du header. Il est possible d'ajouter plusieurs éléments dans ce slot.
Il sera principalement utilisé pour ajouter un bouton de connexion, d'accès à un compte ou de recherche.
Il est nécessaire de faire attention à la place que prendront les éléments en mode mobile et de prévoir un mode réduit ou de les déporter dans le menu burger.

<Source dark code={`
<script setup lang="ts">
	import { mdiMagnify, mdiAccountCircleOutline } from '@mdi/js'
</script>

<template>
  <HeaderNavigationBar>
	<template #header-side>
	  <div class="d-flex justify-center h-100 ga-4 pr-4">
		<VBtn
			variant="text"
			:prepend-icon="mdiMagnify"
			color="primary"
		>
			Rechercher
		</VBtn>
		<VBtn
			color="primary"
			:prepend-icon="mdiAccountCircleOutline"
		>
			Login
		</VBtn>
	</div>
	</template>
  </HeaderNavigationBar>
</template>
`} />

### Les slots concernant le menu

<Canvas of={HeaderNavigationBarStories.WithSlots} />

#### le slot `logo-brand-section`

<Canvas of={HeaderNavigationBarStories.WithLogoSlot} />

#### Le menu horizontal

Quand le menu est en mode horizontal, les slots `navigation-bar-prepend` et `navigation-bar-append` permettent d'ajouter du contenu avant et après le menu.

Le slot `navigation-bar-content`, quant à lui, remplace les items du menu tels que générés avec la prop `items`. Il n'écrase pas les slots `navigation-bar-prepend` et `navigation-bar-append`.

##### Slot `Navigation-bar-prepend`

<Canvas of={HeaderNavigationBarStories.WithNavigationBarPrependSlot} />

##### Slot `Navigation-bar-append`

<Canvas of={HeaderNavigationBarStories.WithNavigationBarAppendSlot} />

#### Les slots concernant le menu burger

Le menu burger est généré automatiquement à partir des items passés en props, il utilise en interne le composant `HeaderBurgerMenu`.

les slots `burger-menu-prepend` et `burger-menu-append` permettent d'ajouter du contenu en haut et en bas du menu burger.

Le slot `burger-menu-content` permet de remplacer le contenu du menu burger. Il n'écrase pas les slots `burger-menu-prepend` et `burger-menu-append` et permet d'utiliser les composants `HeaderMenuItem` et `HeaderMenuGroup` pour construire le menu.
Pour plus d'information sur la manière de construire un menu avec le composant `HeaderBurgerMenu`, vous pouvez consulter la documentation de ce [composant](/docs/components-headerbar-headerburgermenu--docs).

##### Slot `burger-menu-append`

<Canvas of={HeaderNavigationBarStories.WithNavigationMenuAppendSlot} />

## Confirmation de changement d'onglet

Le composant `HeaderNavigationBar` intègre une fonctionnalité de confirmation avant la navigation entre les onglets. Cela peut être utile pour prévenir une perte de données non sauvegardées ou pour s'assurer que l'utilisateur souhaite vraiment quitter la page actuelle.

Pour activer cette fonctionnalité, utilisez les propriétés suivantes :
- `confirmTabChange` : active la confirmation de changement d'onglet (booléen)

Vous pouvez intercepter l'événement `confirm-tab-change` pour implémenter votre propre logique de confirmation (par exemple, avec une boîte de dialogue personnalisée).

<Canvas of={HeaderNavigationBarStories.WithTabConfirmation} />

## Composants internes et personnalisation

> **Note importante** : Le composant `HeaderNavigationBar` utilise désormais notre composant `SyTabs` du Design System au lieu des composants `VTabs` et `VTab` de Vuetify. Ce changement permet une meilleure accessibilité et une expérience utilisateur plus cohérente avec les standards RGAA.

Vous pouvez consulter la documentation complète du composant [SyTabs](/docs/composants-customs-sytabs--docs) pour plus d'informations sur ses fonctionnalités et son API.

Pour la personnalisation des autres composants internes comme `VSheet`, vous pouvez toujours utiliser la props `vuetifyOptions`.

<Canvas of={HeaderNavigationBarStories.WithVuetifyOptions} />