Modification in header of the project for better UI

client/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { NavLink, Link, useNavigate } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { logout } from "../store/slices/userSlice.jsx";
@@ -24,7 +24,7 @@ import ThemeToggle from "./ThemeToggle";
 export default function Header() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const { user, isAuthenticated } = useSelector(state => state.user);
+  const { user, isAuthenticated } = useSelector((state) => state.user);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -34,188 +34,142 @@ export default function Header() {
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  useEffect(() => {
+    document.body.style.overflow = isMobileMenuOpen ? "hidden" : "unset";
+  }, [isMobileMenuOpen]);
+
   const handleLogout = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('userData');
+    localStorage.removeItem("token");
+    localStorage.removeItem("userData");
     dispatch(logout());
-    navigate('/');
+    navigate("/");
   };
 
-  useEffect(() => {
-    if (isMobileMenuOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "unset";
-    }
-    return () => {
-      document.body.style.overflow = "unset";
-    };
-  }, [isMobileMenuOpen]);
-
   const navItems = [
     { to: "/", label: "Home", icon: <Home className="w-4 h-4" /> },
     { to: "/about", label: "About", icon: <User className="w-4 h-4" /> },
     { to: "/blog", label: "Blog", icon: <BookOpen className="w-4 h-4" /> },
     { to: "/contactus", label: "Contact", icon: <Mail className="w-4 h-4" /> },
     { to: "/news", label: "News", icon: <Newspaper className="w-4 h-4" /> },
-    {
-      to: "/consultation",
-      label: "Consultation",
-      icon: <Phone className="w-4 h-4" />,
-    },
-    {
-      to: "/care-co-pilot",
-      label: "Care Co-Pilot",
-      icon: <Heart className="w-4 h-4" />,
-    },
-    {
-      to: "/growth-tracker",
-      label: "Growth Tracker",
-      icon: <TrendingUp className="w-4 h-4" />,
-    },
-    {
-      to: "/contributors",
-      label: "Contributors",
-      icon: <Users className="w-4 h-4" />,
-    },
+    { to: "/consultation", label: "Consultation", icon: <Phone className="w-4 h-4" /> },
+    { to: "/care-co-pilot", label: "Care Co-Pilot", icon: <Heart className="w-4 h-4" /> },
+    { to: "/growth-tracker", label: "Growth Tracker", icon: <TrendingUp className="w-4 h-4" /> },
+    { to: "/contributors", label: "Contributors", icon: <Users className="w-4 h-4" /> },
   ];
 
   return (
     <>
-      {/* HEADER */}
       <div
-        className={`fixed top-0 left-0 h-[80px] flex right-0 z-50 transition-all duration-300 
+        className={`fixed top-0 left-0 right-0 z-50 h-[80px] flex items-center px-4 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="max-w-screen-xl mx-auto w-full flex items-center justify-between">
+          {/* Logo */}
+          <Link to="/" className="flex items-center gap-3 flex-shrink-0">
+            <img src={navlogo} alt="Logo" className="h-16 w-16 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-xm text-gray-600 dark:text-gray-400">Compass</p>
+            </div>
+          </Link>
+
+          {/* Desktop Nav */}
+          <div className="hidden lg:flex items-center gap-2 ml-10 flex-1">
+            {navItems.map(({ to, label, icon }) => (
+              <NavLink
+                key={to}
+                to={to}
+                className={({ isActive }) =>
+                  `flex items-center gap-1.5 px-2 py-1 text-sm font-medium rounded-full transition-all duration-300 whitespace-nowrap ${
+                    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"
+                  }`
+                }
+              >
+                {icon}
+                {label}
+              </NavLink>
+            ))}
+          </div>
 
-        <div className="w-full  flex items-center px-4 py-2">
-          <div className="flex items-center gap-5 flex-shrink-0">
-            {/* Logo */}
-            <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>
+          {/* Right side: Theme toggle + Auth buttons */}
+          <div className="flex items-center gap-2 ml-auto">
+            <ThemeToggle />
+
+            {isAuthenticated && user ? (
+              <div className="hidden md:flex items-center gap-2">
+                <div className="flex items-center gap-1 px-2 py-1 bg-purple-50 rounded-full">
+                  <UserCircle className="w-5 h-5 text-purple-600" />
+                  <span className="text-sm font-medium text-purple-800">
+                    {user.name} ({user.role === "doctor" ? "Doctor" : "Patient"})
+                  </span>
+                </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-2 py-1 text-sm font-medium rounded-full transition"
+                >
+                  <LogOut className="w-5 h-5" />
+                  Logout
+                </button>
               </div>
-            </Link>
-
-            {/* Desktop Nav */}
-
-            <div className="hidden lg:flex items-center gap-2 mx-auto">
-
-              {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 whitespace-nowrap ${
-                      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"
-                    }`
-                  }
+            ) : (
+              <div className="hidden md:flex items-center gap-2">
+                <Link
+                  to="/signin"
+                  className="border border-purple-600 text-purple-600 hover:bg-purple-600 hover:text-white px-2 py-1 text-sm font-medium rounded-full transition"
                 >
-                  {icon}
-                  {label}
-                </NavLink>
-              ))}
-            </div>
-
-            {/* Theme Toggle */}
-
-            <div className="hidden lg:flex items-center gap-3 ml-auto">
-
-              <ThemeToggle />
-            </div>
-
-            {/* Auth Buttons */}
-            <div className="hidden lg:flex items-center w-150">
-              {isAuthenticated && user ? (
-                <>
-                  <div className="flex items-center gap-2 px-3 py-1.5 bg-purple-50 rounded-full">
-                    <UserCircle className="w-4 h-4 text-purple-600" />
-                    <span className="text-sm font-medium text-purple-800">
-                      {user.name} ({user.role === 'doctor' ? 'Doctor' : 'Patient'})
-                    </span>
-                  </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"
-                  >
-                    <LogOut className="w-4 h-4" />
-                    Logout
-                  </button>
-                </>
+                  Sign In
+                </Link>
+                <Link
+                  to="/registration"
+                  className="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-3 py-1 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform"
+                >
+                  Get Started
+                </Link>
+              </div>
+            )}
+
+            {/* Mobile Hamburger */}
+            <button
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+              aria-label="Toggle menu"
+              className="lg:hidden p-2 rounded-md bg-purple-100 dark:bg-gray-100 hover:bg-purple-200 dark:hover:bg-gray-200"
+            >
+              {isMobileMenuOpen ? (
+                <X className="w-7 h-7 text-gray-900 dark:text-gray-800" />
               ) : (
-                <>
-                  <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 whitespace-nowrap"
-                  >
-                    Sign In
-                  </Link>
-                  <Link
-                    to="/registration"
-                    className="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-5 py-1.5 ml-2 text-sm font-semibold rounded-full shadow hover:scale-105 transition-transform whitespace-nowrap"
-                  >
-                    Get Started
-                  </Link>
-                </>
+                <Menu className="w-7 h-7 text-gray-900 dark:text-gray-800" />
               )}
-            </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>
+            </button>
           </div>
         </div>
       </div>
 
-      {/* Mobile Menu - OUTSIDE header container */}
+      {/* Overlay */}
       {isMobileMenuOpen && (
         <div
-          className="fixed inset-0 z-40 bg-black bg-opacity-50 lg:hidden"
+          className="fixed inset-0 z-40 bg-black bg-opacity-50"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
 
+      {/* Mobile Menu */}
       {isMobileMenuOpen && (
         <motion.div
           initial={{ x: "100%" }}
           animate={{ x: "0%" }}
           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="fixed inset-y-0 right-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="p-4 border-b flex justify-between items-center">
+              <span className="font-bold text-gray-900 dark:text-white">Menu</span>
+              <button onClick={() => setIsMobileMenuOpen(false)}>
+                <X className="w-7 h-7 text-gray-900 dark:text-white" />
+              </button>
             </div>
 
             <div className="flex-1 overflow-y-auto p-4">
@@ -230,20 +184,15 @@ export default function Header() {
                   {label}
                 </NavLink>
               ))}
-
-              {/* Theme Toggle in Mobile Menu */}
-              <div className="flex items-center justify-center p-3 mt-4">
-                <ThemeToggle />
-              </div>
             </div>
 
-            <div className="p-4 border-t space-y-2">
+            <div className="p-4 border-t space-y-2 md:hidden">
               {isAuthenticated && user ? (
                 <>
                   <div className="flex items-center gap-2 px-4 py-2 bg-purple-50 rounded-full mb-2">
                     <UserCircle className="w-4 h-4 text-purple-600" />
                     <span className="text-sm font-medium text-purple-800">
-                      {user.name} ({user.role === 'doctor' ? 'Doctor' : 'Patient'})
+                      {user.name} ({user.role === "doctor" ? "Doctor" : "Patient"})
                     </span>
                   </div>
                   <button

client/src/components/ThemeToggle.jsx

@@ -21,11 +21,14 @@ const ThemeToggle = () => {
           isDarkMode ? 'opacity-0' : 'opacity-100'
         }`}
       />
-      <Moon
-        className={`absolute right-1.5 h-4 w-4 text-blue-400 transition-opacity duration-300 ${
-          isDarkMode ? 'opacity-100' : 'opacity-0'
-        }`}
-      />
+
+      <div className="relative flex items-center justify-center h-10 w-10">
+        <Moon
+          className={`h-6 w-6 text-blue-400 transition-opacity duration-300 ${
+            isDarkMode ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      </div>
     </button>
   );
 };