WordPress / openverse-frontend

The gateway to the Openverse. Openverse is a search tool for CC-licensed and public domain content across the internet.
https://wordpress.org/openverse
MIT License
72 stars 64 forks source link

Component: VHeaderInternal #1807

Closed obulat closed 2 years ago

obulat commented 2 years ago

_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.

obulat commented 2 years ago

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

Screen Shot 2022-09-14 at 1 17 02 PM
dhruvkb commented 2 years ago

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.