Responsive Layout Improvements (Navbar, Main Content, Footer)

[divysaxena24]

Description

This PR introduces major responsiveness and layout improvements across the application.

Navbar (Header.jsx)

• Converted horizontal navbar into a responsive sidebar/drawer.
• Added a mobile-specific horizontal header with a hamburger menu.
• Implemented a sliding drawer for mobile navigation.
• Desktop sidebar is now fixed, with vertically aligned and properly spaced items.
• Restyled navigation links and auth buttons for vertical layout (full-width + proper margins).

Main Content (App.jsx)

• Content margins now adjust dynamically:
  • mt-20 on mobile (to clear the header).
  • lg:ml-64 on desktop (to clear the sidebar).
• Removed unnecessary top margin.

Footer (Footer.jsx)

• Improved grid responsiveness:
  • Stacks content on small screens.
  • Expands on larger ones.
• Corrected text alignment for different screen sizes.
• "Contact Info" centers on mobile.
• Fixed a JSX syntax error by removing an extra </div>.
• Increased z-index to z-40 to prevent overlap.
• Applied mt-20 lg:ml-64 to align with responsive header.

---

Screenshot (Updated page)

---

Checklist

• Navbar fully responsive (desktop + mobile).
• Main content margins corrected.
• Footer layout + z-index fixed.
• Tested on small and large screens.

---

✅ Changes Summary

• Improved navigation UX (sidebar + drawer).
• Fixed layout spacing issues for both mobile and desktop.
• Enhanced footer responsiveness and resolved overlap/syntax bugs.

---

Related Issue

Closes #277