Modernize Header UI with Responsive Design and Theme Support

[akash6565]

Modernize Header UI with Responsive Design and Theme Support

Overview

This PR updates the header.css and refines header.js to deliver a modern, responsive UI with theme flexibility. It introduces CSS variables, improved styling, and semantic structure for better accessibility and user experience.

Changes

• CSS Enhancements

  • Added CSS variables for light/dark theme (--header-bg, --header-text, --header-accent).
  • Rounded corners and subtle shadows for depth.
  • Smooth hover transitions on logo, navigation links, and user avatar.
  • Responsive layout adjustments for mobile screens.
  • Modern typography using "Inter", sans-serif.

• JSX Updates

  • Applied data-theme={theme} to <header> for seamless theme switching.
  • Added semantic <nav> block for future navigation links.
  • Improved consistency in class usage with updated CSS.

Impact

• Provides a cleaner, modern look for the header.
• Ensures better usability across devices with responsive design.
• Enables future expansion (e.g., adding navigation links) without breaking layout.
• Improves accessibility and user experience with semantic HTML and smooth transitions.

Screenshots

(Add before/after screenshots here if available)

---

Checklist

• CSS variables for theme support
• Responsive design tested
• Dark/light mode toggle verified