Merge pull request #312 from Saksham2k3s/enhancement/header-issue-306

Enhanced Header
VanshKing30 · Jun 15, 2024 · dd90d03 · dd90d03
2 parents 0652d4c + 3a53eb2
commit dd90d03
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/src/App.css b/src/App.css
@@ -39,3 +39,7 @@ li:hover span {
     transform: rotate(360deg);
   }
 }
+
+.nav-item{
+  font-size: 52px !important;
+}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -5,7 +5,6 @@ import { motion, AnimatePresence, useScroll } from "framer-motion";
 import { IoClose } from "react-icons/io5";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { ThemeContext } from '../themeContext';
-
 const Navbar = () => {
   const { theme, toggleTheme } = useContext(ThemeContext);
   const [isOpen, setIsOpen] = useState(false);
@@ -16,45 +15,48 @@ const Navbar = () => {
   };
 
   return (
-    <nav className="text-white p-3 font-semibold shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
+    <>
+     <nav className="text-white p-3 shadow-lg top-0 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 w-full fixed z-40 dark:bg-cadetblue dark:bg-none">
       <motion.div
         className="left-0 top-0 w-full h-1 bg-blue-500 fixed z-50"
         style={{ scaleX: scrollYProgress }}
       />
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="max-w-full mx-auto px-4 sm:px-6 lg:px-12">
         <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
-            <div className="flex-shrink-0">
-              <Link to="/home" className="flex items-center space-x-2">
+
+           {/* Foodies Web Logo */}
+           <div className="flex-shrink-0">
+              <Link to="/home" className="flex items-center">
                 <img src={logo} alt="Logo" className="h-12" />
               </Link>
             </div>
+
             <div className="hidden md:block">
-              <div className="ml-16 flex gap-6 items-baseline space-x-4">
-                <NavItem to="/home" icon={<IconHome />}>Home</NavItem>
-                <NavItem to="/about" icon={<IconAbout />}>About</NavItem>
-                <NavItem to="/news" icon={<IconNews />}>News</NavItem>
-                <NavItem to="/rateus" icon={<IconRateUs />}>RateUs</NavItem>
+              <div className="ml-16 flex gap-6 items-baseline space-x-4   ">
+                <NavItem to="/home" className="nav-item" icon={<IconHome />}>Home</NavItem>
+                <NavItem to="/about" className="nav-item"  icon={<IconAbout />}>About</NavItem>
+                <NavItem to="/news" className="nav-item" icon={<IconNews />}>News</NavItem>
+                <NavItem to="/rateus" className="nav-item" icon={<IconRateUs />}>RateUs</NavItem>
               </div>
-            </div>
+
           </div>
           <div className="hidden md:flex items-center gap-5">
-            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
-              {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
+            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-4xl border-none outline-none ">
+              {theme === 'dark' ? '🌞' : '🌙'}
             </button>
             <div>
               <Link to="/">
                 <button
-                  className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-1 px-2 rounded w-full h-auto text-l relative z-0 rounded-lg transition-all duration-200 hover:scale-110"
+                  className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-3 px-4 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
                 >
                   Log out
                 </button>
               </Link>
             </div>
           </div>
           <div className="-mr-2 flex md:hidden">
-            <button onClick={toggleTheme} className="p-2 rounded focus:outline-none focus:ring">
-              {theme === 'dark' ? '🌞 Light Mode' : '🌙 Dark Mode'}
+          <button onClick={toggleTheme} className="p-2 rounded focus:outline-none text-2xl border-none outline-none ">
+              {theme === 'dark' ? '🌞' : '🌙'}
             </button>
             <button
               onClick={toggleMenu}
@@ -78,23 +80,26 @@ const Navbar = () => {
             exit={{ opacity: 0, y: -50 }}
             className="md:hidden absolute left-0 w-full flex flex-col items-center justify-center"
           >
-            <div className="w-[100%] bg-[#282c34] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
+            <div className="w-[100%] bg-[#152146] px-[20%] pt-2 pb-3 space-y-1 mt-1 dark:bg-teal-900">
               <MobileNavItem to="/home">Home</MobileNavItem>
               <MobileNavItem to="/about">About us</MobileNavItem>
               <MobileNavItem to="/news">News</MobileNavItem>
               <MobileNavItem to="/rateus">Rateus</MobileNavItem>
               <MobileNavItem to="/">
+              <Link to="/">
                 <button
-                  className="bg-green-500 hover:bg-green-700 text-white py-1 px-2 rounded transition duration-300 ease-in-out transform hover:scale-105"
+                  className="bg-green-400 hover:bg-green-600 hover:shadow-green text-white py-3 px-4 w-3/2 h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
                 >
                   Log out
                 </button>
+                </Link>
               </MobileNavItem>
             </div>
           </motion.div>
         )}
       </AnimatePresence>
-    </nav>
+    </nav>  
+  </>
   );
 };
 
@@ -128,6 +133,4 @@ const IconAbout = () => <span>ℹ️</span>;
 const IconNews = () => <span>📰</span>;
 const IconRateUs = () => <span>⭐</span>;
 
-export default Navbar;
-
-
+export default Navbar;
diff --git a/src/index.css b/src/index.css
@@ -23,6 +23,11 @@ code {
   display: none;
 }
 
+.nav-item{
+   font-size: 12px !important;
+   font-weight: bolder !important;
+}
+
 * {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE, Edge */