@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/HeaderBar/HeaderLogo/tests/HeaderLogo.spec.ts

@@ -59,7 +59,7 @@ describe('HeaderLogo', () => {
 				serviceTitle: 'Test service title',
 			},
 			slots: {
-				serviceTitle: '<h1>other title</h1>',
+				'brand-content': '<h1>other title</h1>',
 			},
 		})
 
@@ -68,4 +68,52 @@ describe('HeaderLogo', () => {
 		expect(render).toContain('other title')
 		expect(render).not.toContain('Test service title')
 	})
+
+	it('render a router-link when homeLink is set with `to`', async () => {
+		const wrapper = mount(HeaderLogo, {
+			global: {
+				plugins: [vuetify],
+				stubs: ['RouterLink'],
+			},
+			props: {
+				homeLink: {
+					to: '/',
+				},
+			},
+		})
+
+		expect(wrapper.find('router-link-stub').exists()).toBe(true)
+		expect(wrapper.find('router-link-stub').attributes('to')).toBe('/')
+	})
+
+	it('render a div when there there is no `RouterLink` component registered', async () => {
+		const wrapper = mount(HeaderLogo, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				homeLink: {
+					to: '/',
+				},
+			},
+		})
+
+		expect(wrapper.find('.logo').element.tagName).toBe('DIV')
+	})
+
+	it('render a div when the homeLink properties `to` and `href` are both set to `undefined`', async () => {
+		const wrapper = mount(HeaderLogo, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				homeLink: {
+					to: undefined,
+					href: undefined,
+				},
+			},
+		})
+
+		expect(wrapper.find('.logo').element.tagName).toBe('DIV')
+	})
 })

package/src/components/HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-	import { computed, ref, type CSSProperties } from 'vue'
-	import { useTheme } from 'vuetify'
+	import { ref } from 'vue'
 	import { mdiClose, mdiMenu } from '@mdi/js'
 	import locals from './locals'
 
-	const theme = useTheme()
 	const btn = ref<HTMLElement | null>(null)
-	const btnFocused = ref(false)
-
 	const model = defineModel<boolean>()
 
-	const btnStyle = computed<CSSProperties>(() => {
-		const light = model.value || btnFocused.value
-
-		return ({
-			backgroundColor: light ? '#fff' : theme.current.value.colors.primary,
-			color: light ? theme.current.value.colors.primary : '#fff',
-		})
-	})
-
 	function focus() {
 		btn.value?.focus()
 	}
@@ -30,13 +17,13 @@
 	<button
 		ref="btn"
 		class="header-menu-btn"
-		:style="btnStyle"
+		:class="{
+			'header-menu-btn__open': model
+		}"
 		type="button"
 		:aria-label="model ? locals.closeMenu : locals.openMenu"
 		:title="model ? locals.closeMenu : locals.openMenu"
-		@click="() => (model = !model)"
-		@focus="btnFocused = true"
-		@blur="btnFocused = false"
+		@click="() => { model = !model }"
 	>
 		<VIcon size="48">
 			{{ model ? mdiClose : mdiMenu }}
@@ -51,7 +38,7 @@
 
 .header-menu-btn {
 	text-transform: Capitalize;
-	height: $header-height - 1;
+	height: $header-height;
 	width: 82px;
 	display: flex;
 	flex-direction: column;
@@ -59,14 +46,23 @@
 	flex-shrink: 0;
 	justify-content: center;
 	font-weight: 700;
-	transition: color 0.15s 0.1s, background-color 0.15s 0.1s;
+	background-color: $primary-base;
+	color: $neutral-white;
+	border-bottom: solid 1px $blue-lighten-80;
+	transition: color 0.15s 0.1s, background-color 0.15s 0.1s, border-bottom 0.15s 0.1s;
 
 	&:focus-visible {
-		background-color: $primary-base;
-		color: $neutral-white;
+		background-color: $neutral-white;
+		color: $primary-base;
 	}
 }
 
+.header-menu-btn__open {
+	background-color: $neutral-white;
+	color: $primary-base;
+	border-color: $neutral-white;
+}
+
 @media screen and (max-width: ($header-breakpoint + 1)) {
 	.header-menu-btn__label {
 		clip: rect(0 0 0 0);
@@ -81,7 +77,7 @@
 
 @media screen and (min-width: $header-breakpoint) {
 	.header-menu-btn {
-		height: $header-height-desktop - 1;
+		height: $header-height-desktop;
 		width: $header-height-desktop;
 	}
 }

package/src/components/HeaderBar/HeaderMenuBtn/tests/HeaderMenuBtn.spec.ts

@@ -0,0 +1,70 @@
+import { vuetify } from '@tests/unit/setup'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import HeaderMenuBtn from '../HeaderMenuBtn.vue'
+import locals from '../locals'
+
+describe('HeaderMenuBtn', () => {
+	it('should render the component', async () => {
+		const wrapper = mount(HeaderMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: false,
+			},
+		})
+
+		expect(wrapper.html()).toContain(locals.openMenu)
+
+		await wrapper.setProps({
+			modelValue: true,
+		})
+
+		expect(wrapper.html()).toContain(locals.closeMenu)
+	})
+
+	it('emit an event when the button is clicked', async () => {
+		const wrapper = mount(HeaderMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: false,
+			},
+		})
+
+		const button = wrapper.find('button')
+
+		await button.trigger('click')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+	})
+
+	it('focus when the focus exposed function is called', async () => {
+		const wrapper = mount(HeaderMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: false,
+			},
+			attachTo: document.body,
+		})
+
+		const button = wrapper.find('button')
+
+		expect(button.element).not.toBe(document.activeElement)
+
+		await wrapper.vm.focus()
+
+		expect(button.element).toBe(document.activeElement)
+
+		document.body.focus()
+
+		expect(button.element).not.toBe(document.activeElement)
+
+		wrapper.unmount()
+	})
+})

package/src/components/HeaderBar/Usages.mdx

@@ -0,0 +1,85 @@
+import { Meta } from "@storybook/blocks";
+import * as HeaderBarStories from "./HeaderBar.stories";
+
+<Meta of={HeaderBarStories} />
+
+# Usages
+
+<br />
+
+<img alt="HeaderBar1" src={'/HeaderBar1.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+<img alt="HeaderBar2" src={'/HeaderBar2.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+Pour les produits avec un faible nombre d’entrées dans le menu (inférieur à 6) la barre de navigation prend la forme d’une liste d’onglet. Cet affichage permet un aperçu direct des différentes fonctionnalités de la plateforme ainsi qu’un accès plus rapide à ces dernières.
+
+<br />
+
+<img alt="HeaderBar3" src={'/HeaderBar3.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+Pour les produits possédant (ou allant posséder) plus de 6 entrées, nous utilisons le menu burger issu de la refonte d’Ameli.fr. Anticipez dès la phase de conception le nombre de fonctionnalités prévues en version cible afin de choisir la version adaptée.
+
+<br />
+
+<img alt="HeaderBar4" src={'/HeaderBar4.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+<img alt="HeaderBar5" src={'/HeaderBar5.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+<img alt="HeaderBar6" src={'/HeaderBar6.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+<img alt="HeaderBar7" src={'/HeaderBar7.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+En mobile, quel que soit le nombre d’entrées nous utilisons toujours le burger menu.
+
+<br />
+
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}>
+    <img alt="HeaderBar8" src={'/HeaderBar8.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+    <img alt="HeaderBar9" src={'/HeaderBar9.jpg'} style={{ maxWidth: '30%', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+</div>
+
+<br /><br />
+
+Lorsque la toolbar est nécessaire, elle se trouve systématiquement en tant que premier élément du header. Il est possible de l’utiliser sans la partie permettant de sélectionner un public.
+
+<br />
+
+<img alt="HeaderBar10" src={'/HeaderBar10.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+<img alt="HeaderBar11" src={'/HeaderBar11.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+
+<br /><br />
+
+Le slot de droite est à la main de chaque équipe produit.<br />
+Il contiendra généralement un bouton de connexion devenant l’identifiant de connexion le cas échéant.<br />
+Il est également possible d’y ajouter d’autres fonctionnalités selon les besoins, comme une recherche, un accès aux notifications...
+
+<br />
+
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start', marginBottom: '10px' }}>
+    <figcaption style={{ width: '30%', marginRight: '20px' }}>Exemple non-connecté</figcaption>
+    <figcaption style={{ width: '30%', marginRight: '20px' }}>Exemple connecté</figcaption>
+    <figcaption style={{ width: '30%' }}>Exemple connecté - active</figcaption>
+</div>
+
+<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-start' }}>
+    <img alt="HeaderBar12" src={'/HeaderBar12.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+    <img alt="HeaderBar13" src={'/HeaderBar13.jpg'} style={{ maxWidth: '30%', marginRight: '20px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+    <img alt="HeaderBar14" src={'/HeaderBar14.jpg'} style={{ maxWidth: '30%', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+</div>

package/src/components/HeaderBar/consts.scss

@@ -3,5 +3,4 @@ $header-height-desktop: 95px;
 $header-height: 77px;
 $header-max-width: 1712px;
 $menu-border-color: #e0e0e0;
-$menu-height: 70vh;
 $menu-width: 350px;

package/src/components/HeaderBar/tests/HeaderBar.spec.ts

@@ -1,12 +1,16 @@
 import { vuetify } from '@tests/unit/setup'
 import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterAll, describe, expect, it, vi } from 'vitest'
 import { defineComponent, inject, onMounted, ref, type Ref } from 'vue'
 import HeaderBar from '../HeaderBar.vue'
 import { registerHeaderMenuKey } from '../consts'
 
 describe('HeaderBar', () => {
-	afterEach(() => {
+	vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
+		default: (fn: (...args: unknown[]) => void) => fn,
+	}))
+
+	afterAll(() => {
 		vi.restoreAllMocks()
 		document.body.innerHTML = ''
 	})
@@ -56,6 +60,7 @@ describe('HeaderBar', () => {
 				'menu': '<div>Menu slot</div>',
 				'logo': '<div>Logo slot</div>',
 				'header-side': '<div>Header side slot</div>',
+				'logo-brand-content': '<div>Logo brand content slot</div>',
 			},
 		})
 
@@ -67,6 +72,7 @@ describe('HeaderBar', () => {
 		expect(text).toContain('Menu slot')
 		expect(text).toContain('Logo slot')
 		expect(text).toContain('Header side slot')
+		expect(text).not.toContain('Logo brand content slot')
 
 		wrapper.unmount()
 	})

package/src/components/HeaderBar/tests/__snapshots__/HeaderBar.spec.ts.snap

@@ -2,11 +2,10 @@
 
 exports[`HeaderBar > should render the component 1`] = `
 "<header data-v-efdbe191="" class="header" style="min-height: auto;">
-  <div data-v-efdbe191="" class="sticky-header" style="position: relative; top: auto; transform: none; transition: none;">
+  <div data-v-efdbe191="" class="sticky-header" style="position: relative; width: 100%; top: auto; transform: none; transition: none;">
     <!--v-if-->
-    <div data-v-efdbe191="" class="inner-header d-flex">
-      <div data-v-efdbe191="" class="header-logo">
-        <div data-v-a3ce97de="" data-v-efdbe191="" class="logo"><svg data-v-d1ac2910="" data-v-a3ce97de="" fill="#0c419a" width="141" height="42" viewBox="0 0 211 64" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-label="Logo de l'Assurance Maladie, cliquez pour revenir à l'accueil">
+    <div data-v-efdbe191="" class="inner-header">
+      <div data-v-efdbe191="" class="header-logo"><a data-v-a3ce97de="" data-v-efdbe191="" href="/" class="logo"><svg data-v-d1ac2910="" data-v-a3ce97de="" fill="#0c419a" width="141" height="42" viewBox="0 0 211 64" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" aria-label="Logo de l'Assurance Maladie, cliquez pour revenir à l'accueil">
             <g data-v-d1ac2910="">
               <path d="M100.1 45V30.6h3.8v14.6c0 .8.4 1 .7 1h.5l.5 2.9a5 5 0 0 1-2 .3c-2.6 0-3.5-1.7-3.5-4.4Z" data-v-d1ac2910=""></path>
               <path d="m75.7 40.4 3.8-8.5h4V49h-3.6V38.4l-3 7.8h-2.4l-3-7.8v10.7H68V32h4l3.8 8.5Z" data-v-d1ac2910=""></path>
@@ -36,12 +35,8 @@ exports[`HeaderBar > should render the component 1`] = `
             <path d="M50.3 17.3c-.1 0-.3 0-.3-.2A22 22 0 0 0 36.5 10c-.2 0-.4-.3-.3-.5 0-.3.2-.4.5-.4a23 23 0 0 1 14 7.5v.7h-.4Z" data-v-d1ac2910=""></path>
           </svg>
           <!--v-if-->
-          <div data-v-a3ce97de="" if="serviceTitle">
-            <div data-v-a3ce97de="" class="service-title"></div>
-            <!--v-if-->
-          </div>
-        </div>
-      </div>
+          <!--v-if-->
+        </a></div>
       <!--v-if-->
     </div>
     <!--v-if-->

package/src/components/HeaderLoading/HeaderLoading.mdx

@@ -0,0 +1,28 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+import * as HeaderLoading from './HeaderLoading.stories';
+
+<Meta of={HeaderLoading} />
+
+# HeaderLoading
+
+L’élément `HeaderLoading` est une extension du composant `VSkeletonLoader` de Vuetify, il est utilisé pour afficher un élément de chargement avec des dimensions personnalisées.
+
+<Canvas of={HeaderLoading.Default} />
+
+# API
+
+<Controls of={HeaderLoading.Default} />
+
+# Exemple d'utilisation
+
+<Source dark code={`
+<script setup lang="ts">
+	import HeaderLoading from '@cnamts/synapse'
+</script>
+
+<template>
+	<div class="pa-4">
+		<HeaderLoading width="200px" />
+	</div>
+</template>
+`} />

package/src/components/HeaderLoading/HeaderLoading.stories.ts

@@ -0,0 +1,62 @@
+import HeaderLoading from './HeaderLoading.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta<typeof HeaderLoading> = {
+	title: 'Composants/Structure/HeaderLoading',
+	component: HeaderLoading,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['heading', 'itemsNumber', 'row'] },
+	},
+	argTypes: {
+		width: { control: 'text' },
+		height: { control: 'text' },
+	},
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<HeaderLoading :width="width" :height="height" />
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import HeaderLoading from '@cnamts/synapse'
+					
+					const width = '100px'
+					const height = '1rem'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		width: '100px',
+		height: '1rem',
+	},
+	render: (args) => {
+		return {
+			components: { HeaderLoading },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="pa-4">
+                    <HeaderLoading v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}

package/src/components/HeaderLoading/HeaderLoading.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+	import { VSkeletonLoader } from 'vuetify/components/VSkeletonLoader'
+
+	const props = defineProps({
+		width: {
+			type: String,
+			default: '100px',
+		},
+		height: {
+			type: String,
+			default: '1rem',
+		},
+	})
+</script>
+
+<template>
+	<VSkeletonLoader
+		v-bind="$attrs"
+		:width="props.width"
+		:height="props.height"
+		type="heading"
+		aria-hidden="true"
+		class="vd-header-loading"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.vd-header-loading :deep() {
+  background: transparent;
+  .v-skeleton-loader__heading {
+    width: 100%;
+    height: 100%;
+    border-radius: 35px;
+    margin: 0;
+    background: rgba(grey, var(--v-border-opacity));
+  }
+}
+
+// Remove border radius when tile option is activated
+.vd-header-loading.v-skeleton-loader--tile :deep() {
+  .v-skeleton-loader__heading {
+    border-radius: 0;
+  }
+}
+</style>

package/src/components/HeaderLoading/tests/HeaderLoading.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import HeaderLoading from '../HeaderLoading.vue'
+
+describe('HeaderLoading', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(HeaderLoading, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				width: '100px',
+				height: '1rem',
+			},
+		})
+
+		const elExists = wrapper.find('.vd-header-loading').exists()
+		expect(elExists).toBe(true)
+	})
+})

package/src/components/HeaderNavigationBar/HeaderNavigationBar.mdx

@@ -0,0 +1,128 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+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 un navigation à l'aide d'un menu horizontal en mode desktop ce qui peut être util pour les produits ayant peut de page a destination des 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 lien affiché 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 bien 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 tel que généré avec la props `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 de 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} />
+
+
+## Configuration des composants Vuetify internes.
+
+Le composant `HeaderNavigationBar` utilise les composants `VSheet`, `VTabs` et `VTab` de Vuetify pour construire le menu horizontal. Il est possible de configurer ces composants en utilisant la props `vuetifyOptions`.
+
+<Canvas of={HeaderNavigationBarStories.WithVuetifyOptions} />