Component: VHeaderMobile

[obulat]

Description

The new mobile search header is a composite component. In resting state, it shows the Openverse logo link, the search term, and the VContentSettingsButton. When the search input is activated, it shows a back button in the start (left) of the input, and a cross button for clearing the search term.
When the search input is activated, the Recent search terms modal should be opened.
The PR for this issue does not have to implement the Recent searches modal and the Content settings modal

API

Slots

Name	Slot props	Description
start	-	The items at the start of the header: VLogoButton when resting, and VBackButton when active
default	-	The items at the end of the header: the VContentSettingsButton when resting and VClearButton when active

State

The functionality for handling the search submission and search text updates should be extracted to a separate composable, and should be shared with the VHeaderDesktop (TODO: create the issue for the composable)

Code samples

<header>
  <form>
    <slot name="start">
      <VLogoButton v-if="!isActive"/>
      <VBackButton v-else />
    </slot>
    <input id="search-input" />
    <slot>
      <VClearButton v-if="isActive" />
      <template v-else>
        <VSearchStatus class="hidden md:flex" /> // The number of results
        <VSearchContentSettingsButton />
      </template>
    </slot>
  </form>
</header>

Dependencies

References

• Figma:
• Resting: https://www.figma.com/file/KxkZmBNk218V2Fke1GeYCu/New-header-component?node-id=552%3A79971
• Active: https://www.figma.com/file/KxkZmBNk218V2Fke1GeYCu/New-header-component?node-id=552%3A79090

Implementation

• 🙋 I would be interested in implementing this component.