Component: VHeaderInternal

[obulat]

_All work for the 'Create new header' milestone should be done under the new_header feature flag._

Description

For content pages and the home page, we use a header with links to other content pages. Under the md breakpoint, uses a hamburger button, which opens a full-screen modal with the links.

API

VInternalHeader should use the use-pages composable that contains the list of pages, whether their links are external, and whether the link is active.

State

Name	Type	Description
pages	object	return type of usePages composable
isModalVisible	Boolean	The boolean flag that tracks if the mobile modal menu is open

Code samples

<header>
<VLogoButton />
<nav class="hidden md:flex">
  <VLink v-for="page in pages" />
</nav>
<VModal class="flex md:hidden">
  <template #trigger>
    <VIconButton icon-path="hamburger" />
  </template>
  <VPageList pages="pages" />
</VModal>
</header>

Dependencies

VIconButton (hamburger icon for screens below md) This component will need to make modal stylable.

References

The desktop version will basically be a copy of the footer from #1814.

• Figma: https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=2960%3A8548
• mobile modal https://www.figma.com/file/KxkZmBNk218V2Fke1GeYCu/New-header-component?node-id=566%3A69829
• desktop version of the header: https://www.figma.com/file/KxkZmBNk218V2Fke1GeYCu/New-header-component?node-id=560%3A63351

• Implementation

• [ ] 🙋 I would be interested in implementing this component.

[obulat]

Here are some preliminary screenshots (please, note that they are subject to change, always check the Figma files):

[dhruvkb]

Recommendation: Should we change the name to be VHeaderInternal? That way, in a sorted list of files/folders, we'll see all variations of the header together.