Skip to content

Responsive Layout Improvements (Navbar, Main Content, Footer) #291

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.

Sign up for GitHub

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

Open
divysaxena24 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Responsive Layout Improvements (Navbar, Main Content, Footer) #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e13a75a
feat: Implement responsive design for header and footer, and adjust m…
divysaxena24 Sep 15, 2025
04585be
navbar styling was updated
divysaxena24 Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function App() {
<ScrollToTop />
<ScrollToBottom />

<main className="mt-20 bg-white dark:bg-gray-900 transition-colors duration-300">
<main className="lg:ml-64 bg-white dark:bg-gray-900 transition-colors duration-300">
<Outlet />
</main>

Expand Down
9 changes: 3 additions & 6 deletions client/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,9 @@ const Footer = () => {
);

const renderMainContent = () => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 mb-16">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12 mb-16">
{/* Quick Links */}
<div className="text-center lg:text-left">
<h4 className="text-2xl font-bold text-white mb-8">Quick Links</h4>
<div className="grid grid-cols-2 gap-4">
{quickLinks.map((link, index) => (
<a
key={index}
Expand All @@ -116,7 +114,6 @@ const Footer = () => {
</a>
))}
</div>
</div>

{/* Contact Info */}
<div className="text-center lg:text-left">
Expand All @@ -138,7 +135,7 @@ const Footer = () => {
return (
<div
key={index}
className="flex lg:justify-start space-x-4"
className="flex sm:justify-center lg:justify-start space-x-4"
>
<div className="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
<IconComponent className="w-6 h-6 text-white" />
Expand Down Expand Up @@ -261,7 +258,7 @@ const Footer = () => {
</div>

{/* Main Footer Content */}
<div className="relative z-10 max-w-7xl mx-auto px-6 py-20">
<div className="relative z-40 max-w-7xl mx-auto px-6 py-20 mt-20 lg:ml-64">
{renderTopSection()}
{renderMainContent()}
{renderSocialSection()}
Expand Down
90 changes: 39 additions & 51 deletions client/src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,14 +82,27 @@ export default function Header() {

return (
<>
{/* HEADER */}
<div
className={`fixed top-0 left-0 h-[80px] flex items-center right-0 z-50 transition-all duration-300
${isScrolled ? "shadow-md" : ""}
bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700`}
>
<div className="w-full px-4 py-2">
<div className="max-w-screen-xl mx-auto flex items-center justify-between">
{/* MOBILE HEADER */}
<div className="lg:hidden fixed top-0 left-0 right-0 h-[80px] flex items-center justify-between px-4 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 z-50">
<Link to="/" className="flex items-center gap-3">
<img src={navlogo} alt="Logo" className="h-12 w-12 rounded-full shadow-lg" />
<div className="leading-tight">
<h1 className="text-xl font-bold text-gray-900 dark:text-white">InfantCare</h1>
<p className="text-xs text-gray-600 dark:text-gray-400">Compass</p>
</div>
</Link>
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle mobile menu"
className="p-2 rounded-md bg-purple-100 dark:bg-gray-100 hover:bg-purple-200 dark:hover:bg-gray-200"
>
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
</div>

{/* DESKTOP SIDEBAR */}
<div className="hidden lg:flex fixed top-0 left-0 h-screen w-64 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-r border-gray-200 dark:border-gray-700 flex-col items-center z-50 p-4 space-y-12">
<div className="w-full px-4 py-2 flex flex-col">
{/* Logo */}
<Link to="/" className="flex items-center gap-3">
<img
Expand All @@ -108,13 +121,13 @@ export default function Header() {
</Link>

{/* Desktop Nav */}
<div className="hidden lg:flex items-center gap-2">
<div className="flex flex-col gap-1 mt-8 mb-8">
{navItems.map(({ to, label, icon }) => (
<NavLink
key={to}
to={to}
className={({ isActive }) =>
`flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-medium rounded-full transition-all duration-300 ${
`w-full flex items-center gap-3 p-3 rounded-lg transition-all duration-300 ${
isActive
? "bg-gradient-to-r from-purple-600 to-pink-500 text-white shadow"
: "text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-800 hover:text-purple-600 dark:hover:text-purple-400"
Expand All @@ -128,12 +141,12 @@ export default function Header() {
</div>

{/* Theme Toggle */}
<div className="hidden lg:flex items-center">
<div className="flex flex-col items-center mb-8">
<ThemeToggle />
</div>

{/* Auth Buttons */}
<div className="hidden lg:flex items-center gap-2">
<div className="flex flex-col items-start gap-2 mt-auto">
{isAuthenticated && user ? (
<>
<div className="flex items-center gap-2 px-3 py-1.5 bg-purple-50 rounded-full">
Expand All @@ -144,7 +157,7 @@ export default function Header() {
</div>
<button
onClick={handleLogout}
className="flex items-center gap-1 border border-red-500 text-red-500 hover:bg-red-500 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition"
className="w-full flex items-center justify-center gap-1 border border-red-500 text-red-500 hover:bg-red-500 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition"
>
<LogOut className="w-4 h-4" />
Logout
Expand All @@ -154,65 +167,40 @@ export default function Header() {
<>
<Link
to="/signin"
className="border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition"
className="w-full border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-4 py-1.5 text-sm font-medium rounded-full transition text-center"
>
Sign In
</Link>
<Link
to="/registration"
className="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-5 py-1.5 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform"
className="w-full bg-gradient-to-r from-pink-500 to-purple-600 text-white px-5 py-1.5 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform text-center"
>
Get Started
</Link>
</>
)}
</div>

{/* Hamburger */}
<div className="lg:hidden">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle mobile menu"
className="p-2 rounded-md bg-purple-100 dark:bg-gray-100 hover:bg-purple-200 dark:hover:bg-gray-200"
>
{isMobileMenuOpen ? (
<X className="w-6 h-6 " />
) : (
<Menu className="w-6 h-6 " />
)}
</button>
</div>
</div>
</div>
</div>

{/* Mobile Menu - OUTSIDE header container */}
{isMobileMenuOpen && (
<div
className="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden"
onClick={() => setIsMobileMenuOpen(false)}
/>
)}

{/* Mobile Menu - DRAWER */}
{isMobileMenuOpen && (
<motion.div
initial={{ x: "100%" }}
initial={{ x: "-100%" }}
animate={{ x: "0%" }}
exit={{ x: "100%" }}
exit={{ x: "-100%" }}
transition={{ duration: 0.3 }}
className="fixed inset-y-0 right-0 z-50 w-80 bg-white dark:bg-gray-900 shadow-xl lg:hidden"
className="lg:hidden fixed inset-y-0 left-0 z-50 w-80 bg-white dark:bg-gray-900 shadow-xl"
>
<div className="h-full flex flex-col">
<div className="p-4 border-b">
<div className="flex justify-between items-center">
<span className="font-bold text-white">Menu</span>
<button onClick={() => setIsMobileMenuOpen(false)}>
<X className="w-6 h-6 text-white" />
</button>
</div>
<div className="h-full flex flex-col p-4 space-y-4">
<div className="flex justify-between items-center">
<span className="font-bold text-white">Menu</span>
<button onClick={() => setIsMobileMenuOpen(false)}>
<X className="w-6 h-6 text-white" />
</button>
</div>

<div className="flex-1 overflow-y-auto p-4">
<div className="flex-1 overflow-y-auto">
{navItems.map(({ to, label, icon }) => (
<NavLink
key={to}
Expand Down
2 changes: 2 additions & 0 deletions run_dev.bat
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
cd client
npm run dev
2 changes: 2 additions & 0 deletions run_frontend.bat
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
cd client
npm install