Component Request - FTVA Header Primary, Header Sticky, SiteBrand

[tinuola]

Component Description

This component request is for FTVA variants (usetheme: ftva) to be created for existing components; the variants will be assembled to build the FTVA Header section.

Existing components to be updated:

• SiteBrand: the FTVA version will include a Donate button
• NavPrimary: the FTVA version will include the recently created NavSearch component
• HeaderSticky: the FTVA version only includes NavPrimary

Design

Default display:

Search component display:

On hover and expanded:

• Prototype of sticky and expanded behaviors: https://www.figma.com/proto/L8e1czKo8a8px368ayyPZ4/Final-Design-with-Annotations?node-id=1406-18021&t=yLW1JwUR8767jE6D-0&scaling=scale-down&content-scaling=fixed&page-id=1235%3A6262&starting-point-node-id=1406%3A18021&show-proto-sidebar=1

• Design and Annotations: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=9778-5503&t=NXeIfPvsdvbc18ra-4

Responsiveness

Pending feedback and Updated preview(s) from UX:

https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?m=auto&node-id=14773-5400&t=0J9aDhKfi3VDDFdf-1

• Default NavPrimary component behavior on mobile: hamburger menu and overlay
• Preferably, menu bar retains stickiness on mobile
• Donate button should be at the bottom of the menu list
• Search icon should be at the top, with the hamburger icon
  • The search field and the menu items display are coupled (in the overlay)
  • However, when the search icon is pressed, only the search field should be displayed; but when the hamburger is pressed the entire overlay (search and menu items) should be displayed

Slots

No slots

Props

No new props?

Developer Tips

List any developer tips here

1. See annotations for specs
2. pinia state name sTop which can be used to enable the header sticky in the default layout, when the user scrolls past brand bar which is approximately 40px: { "has-scrolled-past-brand": useStore.state.sTop >= 40 },
3. Logic needed on mobile view to render search field alone when the search icon is pressed, and to render both search field and menu items when the hamburger is pressed

Events

1. Header items on click reveal the expanded menu
2. Search icon on click reveals the search component
3. On mobile, the search icon reveals the search field; the hamburger icon reveals the search field and the menu items in the overlay

Child components

• NavPrimary
• HeaderSticky
• SiteBrand
• ButtonLink

Screenshots

[farosFreed]

Approved, looks great