Skip to content

EMULSIF-305: Add header component#175

Open
josue2591 wants to merge 8 commits into
mainfrom
emulsif-305--header-component
Open

EMULSIF-305: Add header component#175
josue2591 wants to merge 8 commits into
mainfrom
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
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