Skip to content

EMULSIF-305: Add header component#175

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

EMULSIF-305: Add header component#175
josue2591 wants to merge 6 commits into
mainfrom
emulsif-305--header-component

Conversation

@josue2591
Copy link
Copy Markdown
Contributor

@josue2591 josue2591 commented Aug 27, 2025

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
Copy link
Copy Markdown

netlify Bot commented Aug 27, 2025

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
Copy link
Copy Markdown

netlify Bot commented May 18, 2026

Deploy Preview for emulsify-ui-kit ready!

Name Link
🔨 Latest commit 7c44f1b
🔍 Latest deploy log https://app.netlify.com/projects/emulsify-ui-kit/deploys/6a0b2d48b383d90008c645a1
😎 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
Copy link
Copy Markdown
Collaborator

@mariannuar mariannuar left a comment

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 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

👉 Needs Work Reviewer has requested changes.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants