Adding Toggle New Features

Author: CodeMonitor-lab

ToggleNav/src/components/Header.jsx

@@ -11,26 +11,27 @@ const Header = () => {
   };
 
   return (
-    <header className="bg-sky-500 py-3 px-4 flex items-center justify-between relative">
-      <span className="text-white font-bold text-xl">Logo</span>
+    <header className="bg-sky-700 py-2 px-4 flex items-center justify-between relative ">
+      <span className="text-sky-300 font-bold text-xl">Dev</span>
 
       <button
         onClick={toggleNavbar}
         className="block sm:hidden bg-white rounded-full px-2 py-2 text-red-500"
       >
-        {showMenu ? <FiXSquare size={25} /> : <FiList size={25} />}
+        {showMenu ? <FiXSquare size={25} /> : <FiList color={'blue'} size={25} />}
       </button>
 
       <nav
         className={`${
           showMenu ? "block" : "hidden"
-        } absolute top-full left-0 w-full bg-red-400 px-5 py-4 sm:static sm:block sm:bg-transparent`}
+        } absolute top-full left-0 w-full bg-sky-600 px-4 py-4 sm:static sm:block sm:bg-transparent`}
       >
         <ul className="flex flex-col gap-3 sm:flex-row sm:gap-6">
           {NavNavigate.map((link, index) => (
             <li key={index}>
-              <Link to={link.to} className="text-white hover:underline">
+              <Link to={link.to} className="text-sky-300 font-bold hover:underline">
                 {link.text}
+              <hr className="sm:hidden border w-1/4 my-1 border-gray-00 " />
               </Link>
             </li>
           ))}