Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style(header-menu): refine header menu UI and UX (esp. for mobile) #74

Merged
merged 1 commit into from
Nov 17, 2024
Merged

style(header-menu): refine header menu UI and UX (esp. for mobile) #74

merged 1 commit into from
Nov 17, 2024

Conversation

ZL-Asica
Copy link
Owner

@ZL-Asica ZL-Asica commented Nov 17, 2024 •
edited
Loading

  • Adjusted Header component:

    • Added background color for consistent styling.
    • Modified mobile menu to occupy 50% width with smooth right-to-left animation.
    • Enhanced mobile menu button design with rounded corners and better spacing.
    • Added a backdrop layer with click-to-close functionality.
    • Removed redundant attributes for optimization.

  • Updated HeaderMenu component:

    • Improved alignment using flexbox utilities (gap and items-start).
    • Added gradient divider lines between menu items in mobile view.
    • Ensured the entire menu item (icon, label, and divider) is clickable to avoid dead zones.
    • Simplified desktop menu styles and alignment.

  • Fixed:

    • Dead zone issue between menu items and dividers.

@vercel Vercel
Copy link

vercel bot commented Nov 17, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
suzu-blog ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 17, 2024 6:46am

@ZL-Asica ZL-Asica linked an issue Nov 17, 2024 that may be closed by this pull request
Mobile header menu style #59
Closed
@ZL-Asica ZL-Asica changed the title style(header-menu): refine header menu style (esp. for mobile) style(header-menu): refine header menu UI and UX (esp. for mobile) Nov 17, 2024
@ZL-Asica ZL-Asica added the enhancement New feature or request label Nov 17, 2024
@ZL-Asica ZL-Asica merged commit 4b18fe7 into main Nov 17, 2024
7 checks passed
@ZL-Asica ZL-Asica deleted the style/header-menu branch November 17, 2024 06:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
common-components enhancement New feature or request size/M
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Mobile header menu style
1 participant
@ZL-Asica