Feature Request: Add Responsive Header and Navigation

The app currently lacks a responsive header and navigation system, making it difficult to use on smaller screens. Users should be able to easily access core pages like Home, My Books, and Add Book from any device. The header should dynamically adjust for authenticated and unauthenticated users, showing the appropriate nav options.

🎯 Proposed Solution

• Create a Header component (App/src/components/Header.tsx).
• Use Tailwind CSS breakpoints or media queries to make it responsive.
• Include:
  • App title and navigation links: Home, My Books, Add Book.
  • Conditional rendering:
    • Authenticated users → “Profile” & “Sign Out”.
    • Unauthenticated users → “Sign In / Sign Up”.
• Add a hamburger menu for mobile screens.
• Ensure accessibility: keyboard navigable and screen-reader friendly.

✅ Expected Behavior

• Header adapts seamlessly to all screen sizes.
• Desktop: nav links visible horizontally.
• Mobile: menu icon toggles navigation drawer.
• Auth state dynamically changes visible menu items.

💻 Technical Notes

• Implement using React functional components and Tailwind utilities.
• Consider using Headless UI or custom state for menu toggle.
• Test across mobile, tablet, and desktop breakpoints.

🧪 Test Steps

1. Run frontend with npm run dev.
2. Resize the browser to mobile and tablet widths.
3. Verify that the navigation collapses correctly and all links remain accessible.
4. Toggle auth state and confirm correct nav options.