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.