Header - AvHeader

✨ Introduction

The AvHeader component is an ultra-flexible header component. It integrates a search bar and quick links (via the quickLinks slot). It also allows the addition of a main navigation in the mainnav slot and a language selector via the language-selector prop.

🏗️ Structure

The header consists of:

• the Cofolio brand block.
• an optional role context (i.e., user role or context-specific information).
• a baseline (description) below the site name.
• an optional functional section - offering quick access and/or a search bar and/or a language selector - adapted to the specific needs of each site.

🏷️ Props

Name	Type	Default	Mandatory	Description
searchbarId	string	'searchbar-header'		Value of the id attribute of the searchbar input.
homeTo	string | RouteLocationRaw	'/'		Homepage link.
modelValue	string	''		Value for the search bar.
placeholder	string	'Rechercher...'		Placeholder for the search bar.
languageSelector	AvLanguageSelectorProps	undefined		Language selector configuration.
searchLabel	string	'Recherche'		Label for the search bar.
showSearch	boolean	false		Shows or hides the search bar.
showSearchLabel	string	'Recherche'		Label for the button to display the search.
menuLabel	string	'Menu'		Menu label.
menuModalLabel	string	'Menu'		Menu label in modal mode.
closeMenuModalLabel	string	'Fermer'		Menu close button label in modal mode.
homeLabel	string	'Accueil'		Home label comprising the title of the link presenting the service.

🔊 Events

Name	Data (payload)	Description
'update:modelValue'	Content (string) of the search input field	Emitted when the search bar is updated.
'search'	Content (string) of the search input field	Emitted when a search is performed.
'languageSelect'	Content (AvLanguageSelectorElement) of the selected language	Emitted when the user changes the site language.

🎨 Slots

| Name | Description | | quickLinks | Slot to add quick links. | | mainnav | Slot for the main navigation menu. | | roleContext | Slot for the role context (i.e., user role or context-specific information). | | default | Default slot for additional content in the header. |

💡 Examples of use

<script setup lang="ts">
const { languageSelector, selectLanguage } = useLanguageSwitcher()
const searchQuery = ref('')
</script>

<template>
  <AvHeader
    v-model="searchQuery"
    home-label="Student Cofolio"
    home-to="/student"
    show-search
    :language-selector="languageSelector"
    @language-select="selectLanguage($event)"
  >
    <template #quickLinks>
      <ul class="av-btns-group">
        <li>
          <StudentMailboxPopover />
        </li>
        <li>
          <StudentNotificationsPopover />
        </li>
        <li>
          <StudentProfilePopover />
        </li>
      </ul>
    </template>
    <template #mainnav>
      <StudentNavigation />
    </template>
  </AvHeader>
</template>