Skip to content

EMULSIF-305: Add header component#175

Open
josue2591 wants to merge 8 commits into
emulsif-565--emulsify-core-4x-upgradefrom
emulsif-305--header-component
Open

EMULSIF-305: Add header component#175
josue2591 wants to merge 8 commits into
emulsif-565--emulsify-core-4x-upgradefrom
emulsif-305--header-component

Conversation

@josue2591

@josue2591 josue2591 commented Aug 27, 2025

Copy link
Copy Markdown
Contributor

Tickets

https://fourkitchens.clickup.com/t/36718269/EMULSIF-305

Summary

Adds a header component

How to review this pull request

  • Navigate to the Header component implementation.
  • Verify that the Header UI styles and layout are consistent with the approved Figma specifications (spacing, typography, colors, alignment, and responsiveness).
  • Validate that the main navigation menu functions correctly, including routing, active states, hover interactions, and accessibility behavior.
  • Confirm that the Header component behaves correctly in the mobile viewport, including responsive layout, hamburger menu interactions, and navigation usability.
image image

@netlify

netlify Bot commented Aug 27, 2025

Copy link
Copy Markdown

Deploy Preview for emulsify-ui-kit failed.

Name Link
🔨 Latest commit 8bbc6c1
🔍 Latest deploy log https://app.netlify.com/projects/emulsify-ui-kit/deploys/68af751990790b000836c7ee

@robherba robherba added the 👉 Needs Work Reviewer has requested changes. label Aug 27, 2025
@robherba robherba added 🚧 Work in Progress The PR is a work in progress. and removed 👉 Needs Work Reviewer has requested changes. labels Apr 29, 2026
@netlify

netlify Bot commented May 18, 2026

Copy link
Copy Markdown

Deploy Preview for emulsify-ui-kit ready!

Name Link
🔨 Latest commit fa40033
🔍 Latest deploy log https://app.netlify.com/projects/emulsify-ui-kit/deploys/6a19b8ec229c970007d549a7
😎 Deploy Preview https://deploy-preview-175--emulsify-ui-kit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@robherba robherba added 👍 Ready for Review Work is ready for review. and removed 🚧 Work in Progress The PR is a work in progress. labels May 18, 2026
@robherba robherba changed the title feat(emulsif-305): add header component EMULSIF-305: Add header component May 18, 2026

@mariannuar mariannuar left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robherba Most of the header looks good, but the main nav should reflect the design we already have implemented

Comment thread src/components/header/header.twig Outdated
Comment on lines +39 to +63
{# Main navigation #}
<nav {{ bem('menu', [], header__base_class) }}>
<div {{ bem('search', ['mobile'], header__base_class) }}></div>
{% block header__menu %}
<ul>
{% for item in header__menu %}
<li {{ bem('menu-item', [], header__base_class) }}>
<a {{ bem('link', [], header__base_class ~ '__menu-item') }} href="{{ item.url }}">
{{ item.label }}
</a>
{% if item.submenu %}
<button type="button" {{ bem('toggle', [], header__base_class ~ '__menu-item') }} aria-expanded="false" aria-controls="">
{% include "@components/icons/_icon.twig" with {
icon__decorative: true,
icon__name: 'chevron-down',
} %}
</button>
<ul {{ bem('submenu', [], header__base_class ~ '__menu-item') }}>
{% for subitem in item.submenu %}
<li {{ bem('submenu-item', [], header__base_class) }}>
<a {{ bem('link', [], header__base_class ~ '__submenu-item') }} href="{{ subitem.url }}">{{ subitem.label }}</a>
</li>
{% endfor %}
</ul>
{% endif %}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mariannuar mariannuar added 👉 Needs Work Reviewer has requested changes. and removed 👍 Ready for Review Work is ready for review. labels May 23, 2026
@robherba robherba added 👍 Ready for Review Work is ready for review. and removed 👉 Needs Work Reviewer has requested changes. labels May 29, 2026
@robherba

Copy link
Copy Markdown
Contributor

All set @mariannuar!!

@mariannuar mariannuar left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robherba LGTM! Thanks

@robherba robherba added 🎉 Passes Functional Review Functionality is approved by the reviewer. 🎉 Passes Code Review Code is approved by the reviewer. 🎉 Ready to Merge Functionality is approved by the reviewer. and removed 👍 Ready for Review Work is ready for review. labels Jun 7, 2026
@robherba robherba changed the base branch from main to emulsif-565--emulsify-core-4x-upgrade July 1, 2026 22:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎉 Passes Code Review Code is approved by the reviewer. 🎉 Passes Functional Review Functionality is approved by the reviewer. 🎉 Ready to Merge Functionality is approved by the reviewer.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants