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.

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

refactor(components): UI Improvements, Header Modularization, and File Restructure #56

Merged
merged 9 commits into from
Nov 12, 2024

Conversation

ZL-Asica
Copy link
Owner

This PR includes multiple enhancements, bug fixes, and structural changes to improve the maintainability, performance, and user experience of the application.


Enhancements

  1. Header Component Refactor:

    • Modularized Header component.
    • Added animation for smoother hover transitions and a fade-in effect for the mobile menu.
    • Fixed an issue where the mobile dropdown could partially obscure the burger icon.
    • Improved accessibility with an outside-click listener to close the menu.
  2. Search and UI Improvements:

    • Fix dropdown background colors for improved readability in search filters.
  3. Code Quality & Maintainability:

    • Moved hooks within the Header to their own functions for modularity.
    • Added more TypeScript type annotations for better code clarity.
    • Consolidated exports at the end of each file.

Structural Changes

  1. Reorganized Components:

    • Created a posts folder in components to house related components (DisqusComments, Pagination, PostLayout, SearchInput, etc.), improving project structure. layouts removed.
  2. Global Styling Updates:

    • Removed background images on index views to streamline header styling.
  3. Build and Configurations:

    • Added .gitattributes for consistent line endings and file handling.
    • Updated the Node.js engine requirement to Node 20 in package.json.

- Move Header component to components/common
- Fix mobile menu may hover over the burger icon
- Add animation to the mobile menu
- Moved hooks into their own functions.
- Style refine: Animation during hover.
- Remove background image on index.
- Refine header hook for mobile click outside.
@ZL-Asica ZL-Asica added bug Something isn't working enhancement New feature or request labels Nov 12, 2024
Copy link

vercel bot commented Nov 12, 2024

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 12, 2024 4:06pm

@ZL-Asica ZL-Asica changed the title Refactor/components files structure refactor(components): UI Improvements, Header Modularization, and File Restructure Nov 12, 2024
@ZL-Asica ZL-Asica force-pushed the refactor/components-files-structure branch from 31ee5ee to 3dbab05 Compare November 12, 2024 16:05
@github-actions github-actions bot added the posts label Nov 12, 2024
@ZL-Asica ZL-Asica merged commit 7262711 into main Nov 12, 2024
6 checks passed
@ZL-Asica ZL-Asica deleted the refactor/components-files-structure branch November 12, 2024 16:06
@ZL-Asica ZL-Asica linked an issue Nov 12, 2024 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mobile header bugs
1 participant