@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/HeaderBar/HeaderBar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-	import { computed, onMounted, onUnmounted, provide, ref, watch, type CSSProperties, type Ref } from 'vue'
+	import throttleDisplayFn from '@/utils/functions/throttleDisplayFn/throttleDisplayFn'
+	import { computed, onMounted, onUnmounted, provide, ref, watch, type CSSProperties, type DeepReadonly, type Ref } from 'vue'
+	import type { RouteLocationRaw } from 'vue-router'
 	import HeaderLogo from './HeaderLogo/HeaderLogo.vue'
 	import { registerHeaderMenuKey } from './consts'
 	import { locales } from './locales'
@@ -16,6 +18,11 @@
 		homeAriaLabel?: string
 		serviceTitle?: string
 		serviceSubtitle?: string
+		homeLink?: {
+			ariaLabel?: string
+			to?: RouteLocationRaw
+			href?: string
+		}
 	}
 
 	defineSlots<{
@@ -23,6 +30,7 @@
 		'append': (props: SlotProps) => unknown
 		'menu': (props: SlotProps) => unknown
 		'logo': (props: SlotProps & LogoProps) => unknown
+		'logo-brand-content': (props: SlotProps & LogoProps) => unknown
 		'header-side': (props: SlotProps) => unknown
 	}>()
 
@@ -34,6 +42,11 @@
 			 * Need 'sticky' at true,
 			 */
 			hideWhenDown?: boolean
+			homeLink?: {
+				ariaLabel?: string
+				to?: RouteLocationRaw
+				href?: string
+			}
 		} & LogoProps>(),
 		{
 			sticky: true,
@@ -41,9 +54,10 @@
 			homeAriaLabel: locales.homeAriaLabel,
 			serviceTitle: undefined,
 			serviceSubtitle: undefined,
+			homeLink: undefined,
 		})
 
-	function registerHeaderMenu(childMenuStatus: Ref<boolean>) {
+	function registerHeaderMenu(childMenuStatus: DeepReadonly<Ref<boolean>>) {
 		watch(childMenuStatus, (newVal) => {
 			menuOpen.value = newVal
 		})
@@ -57,6 +71,8 @@
 	const headerMinHeight = ref('auto')
 	/** The position of the header (when static) from the top of the page */
 	const headerOffset = ref(0)
+	/** The width of the header to have the same width when fixed and in a container */
+	const headerWidth = ref<string | number>('auto')
 	/** Is the top of the header visible in the viewport when static */
 	const isTopOfHeaderVisible = ref(true)
 	/** Is the header out of the viewport */
@@ -67,7 +83,8 @@
 	function handleScroll() {
 		const headerRec = header.value!.getBoundingClientRect()
 		headerOffset.value = headerRec.top + window.scrollY
-		headerMinHeight.value = isTopOfHeaderVisible.value ? 'auto' : `${header.value!.offsetHeight}px`
+		headerMinHeight.value = `${headerSticky.value!.offsetHeight}px`
+		headerWidth.value = `${header.value!.offsetWidth}px`
 		isTopOfHeaderVisible.value = window.scrollY <= headerOffset.value
 		isScrollBelowHeader.value = window.scrollY > headerOffset.value + headerRec.height
 
@@ -75,15 +92,17 @@
 		shouldAnimateHideHeader.value = window.scrollY > headerOffset.value + (headerRec.height * 2)
 	}
 
+	const throttledHandleScroll = throttleDisplayFn(handleScroll, 16)
+
 	onMounted(() => {
 		handleScroll()
-		window.addEventListener('scroll', handleScroll)
-		window.addEventListener('resize', handleScroll)
+		window.addEventListener('scroll', throttledHandleScroll)
+		window.addEventListener('resize', throttledHandleScroll)
 	})
 
 	onUnmounted(() => {
-		window.removeEventListener('scroll', handleScroll)
-		window.removeEventListener('resize', handleScroll)
+		window.removeEventListener('scroll', throttledHandleScroll)
+		window.removeEventListener('resize', throttledHandleScroll)
 	})
 
 	const headerStyle = computed<CSSProperties>(() => {
@@ -114,19 +133,23 @@
 
 			return {
 				position: staticHeader ? 'relative' : 'fixed',
+				width: staticHeader ? '100%' : headerWidth.value,
 				top: staticHeader ? 'auto' : '0',
 				transform: hide ? 'translateY(-100%)' : 'none',
 				transition: shouldAnimateHideHeader.value ? 'transform 0.3s ease' : 'none',
 			}
 		}
 
+		const fixedHeader = !isTopOfHeaderVisible.value && props.sticky
 		return {
-			position: !isTopOfHeaderVisible.value && props.sticky ? 'fixed' : 'relative',
-			top: !isTopOfHeaderVisible.value && props.sticky ? '0' : 'auto',
+			position: fixedHeader ? 'fixed' : 'relative',
+			width: fixedHeader ? headerWidth.value : '100%',
+			top: fixedHeader ? '0' : 'auto',
 			transform: 'none',
 			transition: 'none',
 		}
 	})
+
 </script>
 
 <template>
@@ -149,7 +172,7 @@
 					:menu-open
 				/>
 			</div>
-			<div class="inner-header d-flex">
+			<div class="inner-header">
 				<slot
 					name="menu"
 					:menu-open
@@ -167,7 +190,21 @@
 							:aria-label="homeAriaLabel"
 							:service-title="serviceTitle"
 							:service-subtitle="serviceSubtitle"
-						/>
+							:home-link
+						>
+							<template
+								#brand-content
+							>
+								<slot
+									name="logo-brand-content"
+									:menu-open
+									:home-aria-label
+									:service-title
+									:service-subtitle
+									:home-link
+								/>
+							</template>
+						</HeaderLogo>
 					</slot>
 				</div>
 				<div
@@ -198,30 +235,27 @@
 @use './consts' as *;
 
 .header {
-	top: 0;
-	width: 100%;
-	height: $header-height;
-	max-width: $header-max-width;
-	margin: 0 auto;
+	position: relative;
+	z-index: 1;
 }
 
 .sticky-header {
 	background-color: $neutral-white;
-	border-bottom: solid 1px $blue-lighten-80;
 	width: 100%;
-	height: $header-height;
-	max-width: $header-max-width;
 	z-index: 1000;
 }
 
 .inner-header {
 	display: flex;
 	align-items: center;
-	height: 100%;
+	height: $header-height;
+	max-width: $header-max-width;
+	margin: 0 auto;
+	border-bottom: solid 1px $blue-lighten-80;
 }
 
 .header-logo {
-	margin-left: 2rem;
+	margin-left: 1rem;
 }
 
 .header-side {
@@ -231,7 +265,11 @@
 }
 
 @media screen and (min-width: $header-breakpoint) {
-	.header, .sticky-header {
+	.header-logo {
+		margin-left: 2rem;
+	}
+
+	.inner-header {
 		height: $header-height-desktop;
 	}
 }

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.mdx

@@ -0,0 +1,433 @@
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import * as HeaderBurgerMenuStories from "./HeaderBurgerMenu.stories";
+
+<Meta of={HeaderBurgerMenuStories} />
+
+
+# HeaderBurgerMenu
+
+L'utilisation de ce menu est à privilégier pour les application à destination du publique ou pour créer des menus contenant plus de six éléments.
+
+## Utilisation
+
+Ce menu est prévu pour être utilisé dans le composant `HeaderBar` via le slot `menu` de ce composant.
+
+<Source
+  dark
+  code={`
+<template>
+  <HeaderBar>
+	<template #menu>
+	  <HeaderBurgerMenu>
+		menu content
+	  </HeaderBurgerMenu>
+	</template>
+  </HeaderBar>
+</template>
+`}
+/>
+
+Ce menu s'utilise conjointement avec les composants `HeaderMenuSection` et `HeaderMenuItem` pour structurer le menu.
+
+Un composant `HeaderMenuSection` peut contenir plusieurs `HeaderMenuItem`.
+
+Un Composant `HeaderMenuItem` doit obligatoirement être contenu dans un `HeaderMenuSection`.
+
+
+<Canvas of={HeaderBurgerMenuStories.Default} />
+
+## API
+
+<Controls of={HeaderBurgerMenuStories.Default} />
+
+## Menu à un seul niveau
+
+Le menu peut être utilisé avec un seul niveau de profondeur.
+
+<Canvas
+	of={HeaderBurgerMenuStories.WithAnItem}
+	source={{
+language: 'html',
+format: 'dedent',
+code:`
+<HeaderBar>
+	<template #menu>
+		<HeaderBurgerMenu>
+			<HeaderMenuSection>
+				<HeaderMenuItem>
+					<a href="/">Item 1</a>
+				</HeaderMenuItem>
+			</HeaderMenuSection>
+		</HeaderBurgerMenu>
+	</template>
+</HeaderBar>
+	`}}
+/>
+
+Il est possible d'utiliser des liens de navigation avec les composants `RouterLink` ou `NuxtLink`.
+
+<Source
+  dark
+  code={`
+      <script setup lang="ts">
+      import { HeaderBar, HeaderBurgerMenu, HeaderMenuSection, HeaderMenuItem } from '@cnamts/synapse'
+      </script>
+
+      <template>
+		<HeaderBar>
+			<template #menu>
+				<HeaderBurgerMenu>
+					<HeaderMenuSection>
+						<HeaderMenuItem>
+							<a href="/">Home</a>
+						</HeaderMenuItem>
+						<HeaderMenuItem>
+							<a href="/about">About</a>
+						</HeaderMenuItem>
+						<HeaderMenuItem>
+							<RouterLink to="/services">Services</RouterLink>
+						</HeaderMenuItem>
+						<HeaderMenuItem>
+							<NuxtLink to="/contact">Contact</NuxtLink>
+						</HeaderMenuItem>
+					</HeaderMenuSection>
+				</HeaderBurgerMenu>
+			</template>
+		</HeaderBar>
+      </template>
+            `}
+      />
+
+
+
+## Menu à plusieurs niveaux
+
+Vous pouvez également constituer votre menu avec plusieurs niveaux de profondeur. Dans ce cas là, il convient d'utiliser le composant `HeaderSubMenu` pour définir les sous-menus.
+
+Pour conserver la logique sémantique du menu, le composant `HeaderSubMenu` doit être contenu dans un `HeaderMenuItem`.
+
+
+<Canvas
+	of={HeaderBurgerMenuStories.Populated}
+	source={{
+language: 'html',
+code:`
+<HeaderBar>
+	<template #menu>
+		<HeaderMenu>
+			<HeaderMenuSection >
+				<template #title>
+					Section 1
+				</template>
+				<HeaderMenuItem>
+					<a>Item 1</a>
+				</HeaderMenuItem>
+				<HeaderMenuItem>
+					<a>Item 2</a>
+				</HeaderMenuItem>
+				<headerMenuItem>
+					<HeaderSubMenu>
+						<template #title>
+							Menu de premier niveau 1
+						</template>
+						<HeaderMenuSection>
+							<template #title>
+								Section 1
+							</template>
+							<HeaderMenuItem>
+								<a>Item</a>
+							</HeaderMenuItem>
+							<HeaderSubMenu>
+								<template #title>
+									Menu de deuxième niveau 1
+								</template>
+								<HeaderMenuItem>
+									<a>Item</a>
+								</HeaderMenuItem>
+							</HeaderSubMenu>
+						</HeaderMenuSection>
+					</HeaderSubMenu>
+				</headerMenuItem>
+			</HeaderMenuSection>
+			<HeaderMenuSection>
+				<template #title>
+					Section 2
+				</template>
+				<headerMenuItem>
+					<HeaderSubMenu>
+						<template #title>
+							Menu de premier niveau 2
+						</template>
+						<HeaderMenuItem>
+							<a>Item 1</a>
+						</HeaderMenuItem>
+						<HeaderMenuItem>
+							<HeaderSubMenu>
+								<template #title>
+									Menu de deuxième niveau 2
+								</template>
+								<HeaderMenuItem>
+									<a>Item 1</a>
+								</HeaderMenuItem>
+							</HeaderSubMenu>
+						</HeaderMenuItem>
+						<HeaderMenuItem>
+							<HeaderSubMenu>
+								<template #title>
+									Menu de deuxième niveau 3
+								</template>
+								<HeaderMenuSection>
+									<template #title>
+										Section 1
+									</template>
+									<HeaderMenuItem>
+										<a>Item 1</a>
+									</HeaderMenuItem>
+								</HeaderMenuSection>
+							</HeaderSubMenu>
+						</HeaderMenuItem>
+					</HeaderSubMenu>
+				</headerMenuItem>
+				<HeaderMenuItem>
+					<a>Item 3</a>
+				</HeaderMenuItem>
+			</HeaderMenuSection>
+			<div class="pa-4">
+				<p class="font-weight-bold">Veillez vous connecter</p>
+				<VBtn variant="tonal" class="mt-4 font-weight-medium" color="primary">Je me connecte</VBtn>
+			</div>
+		</HeaderMenu>
+	</template>
+</HeaderBar>
+	`}}
+/>
+
+
+## Construire un menu de façon dynamique
+
+Voici un exemple de menu construit de façon dynamique.
+
+<Canvas
+	of={HeaderBurgerMenuStories.Generated}
+	story={{
+		height: '500px',
+	}}
+	source={{
+language: 'html',
+format: 'dedent',
+code:`
+<script setup lang="ts">
+	import { HeaderBar, HeaderBurgerMenu, HeaderMenuSection, HeaderMenuItem, HeaderSubMenu } from '@cnamts/synapse'
+	import { mdiMapMarker } from '@mdi/js'
+
+	const marker = mdiMapMarker
+
+	const menu = [
+		{
+			title: 'Vous informer',
+			items: [
+				{ title: 'Actualités', href: 'https://www.ameli.fr/assure/actualites' },
+				{
+					subMenuTitle: 'Droits et démarches',
+					subMenuSubtitle: 'selon votre situation',
+					sections: [
+						{
+							title: undefined,
+							items: [
+								{ title: 'Les essentiels de l\'assuré', href: 'https://www.ameli.fr/assure/droits-demarches/principes' },
+								{ title: 'Parentalité, couple', href: 'https://www.ameli.fr/assure/droits-demarches/famille' },
+								{ title: 'Fin de vie, deuil', href: 'https://www.ameli.fr/assure/droits-demarches/fin-de-vie-deuil' },
+								{ title: 'Etudes et stages', href: 'https://www.ameli.fr/assure/droits-demarches/etudes-stages' },
+								{ title: 'Vie professionnelle, retraite', href: 'https://www.ameli.fr/assure/droits-demarches/vie-professionnelle-retraite' },
+								{ title: 'Difficultés d\'accès aux droits et aux soins', href: 'https://www.ameli.fr/assure/droits-demarches/difficultes-acces-droits-soins' },
+								{ title: 'Maladie, accident, hospitalisation', href: 'https://www.ameli.fr/assure/droits-demarches/maladie-accident-hospitalisation' },
+								{ title: 'invalidité, handicap', href: 'https://www.ameli.fr/assure/droits-demarches/invalidite-handicap' },
+								{ title: 'situations particulières', href: 'https://www.ameli.fr/assure/droits-demarches/situations-particulieres' },
+								{ title: 'réclamation, médiation, recours', href: 'https://www.ameli.fr/assure/droits-demarches/reclamation-mediation-voies-de-recours' },
+								{ title: 'Europe, international', href: 'https://www.ameli.fr/assure/droits-demarches/europe-international' },
+							],
+						},
+					],
+				},
+				{
+					subMenuTitle: 'Remboursements',
+					subMenuSubtitle: 'prestations et aides',
+					sections: [
+						{
+							title: undefined,
+							items: [
+								{ title: 'Ce qui est remboursé', href: 'https://www.ameli.fr/assure/remboursements/rembourse' },
+								{ title: 'ce qui reste à votre charge', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
+								{ title: 'Être bien remboursé', href: 'https://www.ameli.fr/assure/remboursements/etre-bien-rembourse' },
+								{ title: 'Indemnités journalières maladie, maternité, paternité', href: 'https://www.ameli.fr/assure/remboursements/indemnites-journalieres-maladie-maternite-paternite' },
+								{ title: 'Accident du travail : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/accident-travail' },
+								{ title: 'Maladie professionnelle : prise en charge et indemnités journalières', href: 'https://www.ameli.fr/assure/remboursements/maladie-professionnelle' },
+								{ title: 'Pensions, allocations et rentes', href: 'https://www.ameli.fr/assure/remboursements/pensions-allocations-rentes' },
+								{ title: 'Incapacité permanente', href: 'https://www.ameli.fr/assure/remboursements/incapacite-permanente' },
+								{ title: 'Complémentaire santé solidaire : vous n\'avez rien à payer dans la plupart des cas ', href: 'https://www.ameli.fr/assure/remboursements/cmu-aides-financieres/complementaire-sante-solidaire' },
+								{ title: 'Aide médicale de l\'État et soins urgents', href: 'https://www.ameli.fr/assure/remboursements/aide-medicale-etat-soins-urgents' },
+								{ title: 'Compte ameli, mode d\'emploi', href: 'https://www.ameli.fr/assure/remboursements/suivre-remboursements' },
+							],
+						},
+					],
+				},
+				{
+					subMenuTitle: 'Maladies et prévention',
+					sections: [
+						{
+							title: undefined,
+							items: [
+								{ title: 'Tous les thèmes de santé', href: 'https://www.ameli.fr/assure/sante/themes' },
+								{ title: 'L\'Assurance Maladie vous accompagne', href: 'https://www.ameli.fr/assure/remboursements/reste-charge' },
+								{ title: 'Mon espace santé', href: 'https://www.ameli.fr/assure/sante/mon-espace-sante' },
+								{ title: 'Mon bilan prévention', href: 'https://www.ameli.fr/assure/sante/mon-bilan-prevention' },
+								{ title: 'Réagir en cas d\'urgence ', href: 'https://www.ameli.fr/assure/sante/urgence' },
+								{ title: 'Accomplir les bons gestes ', href: 'https://www.ameli.fr/assure/sante/bons-gestes' },
+								{ title: 'Médicaments et vaccins', href: 'https://www.ameli.fr/assure/sante/medicaments' },
+								{ title: 'Déroulement d\'un examen', href: 'https://www.ameli.fr/assure/sante/examen' },
+								{ title: 'Certificat médical : dans quels cas et pour qui est-il obligatoire ?', href: 'https://www.ameli.fr/assure/sante/certificat-medical-quand-et-pour-qui' },
+								{ title: 'Devenir parent', href: 'https://www.ameli.fr/assure/sante/devenir-parent' },
+								{ title: 'Enfants', href: 'https://www.ameli.fr/assure/sante/enfants' },
+								{ title: 'Jeunes 16-25 ans', href: 'https://www.ameli.fr/assure/sante/jeunes-16-25-ans' },
+								{ title: 'Seniors', href: 'https://www.ameli.fr/assure/sante/seniors' },
+								{ title: 'Télésanté, la santé à distance', href: 'https://www.ameli.fr/assure/sante/telesante' },
+							],
+						},
+					],
+				},
+			],
+		},
+		{
+			title: 'Besoin d\'aide',
+			items: [
+				{
+					title: 'Contacter l\'Assurance Maladie',
+					subtitle: 'obtenir une attestation, envoyer une feuille de soins, contacter sa caisse, etc.',
+					href: 'https://www.ameli.fr/assure/adresses-contacts',
+				},
+				{
+					title: 'Trouver un professionnel de santé',
+					subtitle: 'médecins, infirmiers...',
+					href: 'https://www.ameli.fr/assure/adresses-contacts',
+				},
+				{
+					title: 'Télécharger un formulaire (ex: cerfa)',
+					href: 'https://www.ameli.fr/assure/droits-demarches/formulaires',
+				},
+				{
+					title: 'Consulter le forum',
+					href: 'https://forum-assures.ameli.fr/',
+				},
+				{
+					title: 'Sourds et malentendants',
+					href: 'https://elioz.fr/elioz-connect/annuaire/assurance-maladie-annuaire/',
+				},
+			],
+		},
+	]
+</script>
+
+<template>
+	<HeaderBar>
+		<template #menu>
+			<HeaderBurgerMenu>
+				<HeaderMenuSection
+					v-for="section in menu"
+					:key="section.title"
+					:title="section.title"
+				>
+					<HeaderMenuItem
+						v-for="item in section.items"
+						:key="item.title"
+					>
+						<HeaderSubMenu v-if="'subMenuTitle' in item">
+							<template #title>
+								{{ item.subMenuTitle }}
+								<em
+									v-if="item?.subMenuSubtitle"
+									style="font-style: normal; color: #757777;"
+								>{{ item.subMenuSubtitle }}</em>
+							</template>
+							<HeaderMenuSection
+								v-for="subSection in item.sections"
+								:key="subSection.title"
+								:title="subSection.title"
+							>
+								<HeaderMenuItem
+									v-for="subItem in subSection.items"
+									:key="subItem.title"
+								>
+									<a :href="subItem.href">{{ subItem.title }}</a>
+								</HeaderMenuItem>
+							</HeaderMenuSection>
+						</HeaderSubMenu>
+						<a
+							v-else
+							:href="item.href"
+						>
+							{{ item.title }}
+							<em
+								v-if="'subtitle' in item"
+								style="font-style: normal; color: #757777;"
+							>{{ item.subtitle }}</em>
+						</a>
+					</HeaderMenuItem>
+				</HeaderMenuSection>
+				<h2
+					class="border-b-sm mb-2"
+					style="font-size: 1.1rem; padding: 40px 16px 8px 20px;"
+				>
+					Votre caisse
+				</h2>
+				<div style="padding: 16px 50px 16px 20px;">
+					<div class="d-flex align-center ga-2 font-weight-bold">
+						<VIcon
+							aria-label="Localisation"
+							role="img"
+							aria-hidden="false"
+							color="primary"
+						>
+							{{ marker }}
+						</VIcon>
+						<p>Vous n'avez pas sélectionné votre caisse</p>
+					</div>
+					<VBtn
+						class="mt-3 mb-4 font-weight-bold text-capitalize"
+						base-color="primary"
+						density="comfortable"
+						flat
+						height="37"
+					>
+						Sélectionner
+					</VBtn>
+					<p class="mb-8">
+						Les pages d'ameli seront alors enrichies des informations locales de votre caisse (contacts, événements régionaux, etc.)
+					</p>
+				</div>
+			</HeaderBurgerMenu>
+		</template>
+	</HeaderBar>
+</template>
+
+`}}
+/>
+
+
+## Gérer la navigation avec un RouterLink
+
+Si vous positionnez le composant dans un layout ou à la racine de votre application et que vous utilisez un routeur pour gérer la navigation, le menu ne se fermera pas automatiquement lors de la navigation.
+
+Si vous souhaitez que le menu se ferme lors de la navigation, vous pouvez utiliser le `v-model` par défaut pour gérer l'état du menu.
+
+<Source
+	dark
+	language="typescript"
+	format="dedent"
+	code={`
+		const menuOpen = ref(false)
+		const curRoute = useRoute()
+		watch(curRoute, () => {
+			menuOpen.value = false
+		})
+		`}
+/>