harshsinghmumbai · devnabin · Mar 9, 2024 · Mar 9, 2024 · Mar 9, 2024 · Mar 9, 2024
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>My nav</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
@@ -1,75 +1,57 @@
-import { GiHamburgerMenu } from "react-icons/gi";
-import { FaCartPlus } from "react-icons/fa";
-import { FaUserCircle } from "react-icons/fa";
-import { RxCross1 } from "react-icons/rx";
 import { useState } from "react";
-import clsx from "clsx";
+
+import { GiHamburgerMenu } from "react-icons/gi";
+
+// component
+import LeftContainer from "./LeftContainer";
+import Logo from "./Logo";
+import MobileResponsive from "./MobileResponsive";
+
 
 const Header = () => {
-  const [state, setState] = useState(false);
+  const [clicked, setClicked] = useState(false);
+
   const list = [
     { title: "Collection" },
     { title: "men" },
     { title: "About" },
     { title: "Contact" },
   ];
+
   return (
     <>
       <header>
         <div className="w-screen border-b-2 flex justify-between p-2 ">
           <div className="flex justify-center items-center space-x-4 lg:p-3 ">
+
             <GiHamburgerMenu
               id="hamburger"
               onClick={() => {
-                setState(true);
+                setClicked(true);
               }}
               className="text-2xl lg:hidden"
             />
-            <p className="text-xl font-semibold font-mono">logo</p>
+
+            <Logo />
+
             <div className="hidden lg:block">
-            <ul className="ml-10 flex justify-around space-x-11 font-serif hover:text-black">
-              {list.map((elem, i) => {
-                const { title } = elem; //destructed in react //
-                return (
-                  <li key={i} className="text-lg text-gray-500">
-                    {title}
-                  </li>
-                );
-              })}
-              </ul>
-              </div>
-          </div>
-          <div
-            id="mobile-navbar"
-            className={clsx(
-              "fixed top-0 left-0 w-screen h-full bg-black/20 backdrop-blur-sm -translate-x-full",
-              state && "translate-x-0"
-            )}
-          >
-            <div className="bg-white w-3/5 h-full p-7 ">
-              <RxCross1
-                id="Cross-icon"
-                onClick={() => {
-                  setState(false);
-                }}
-                className="text-2xl mb-5 cursor-pointer "
-              />
-              <ul className="space-y-4 font-serif">
+              <ul className="ml-10 flex justify-around space-x-11 font-serif hover:text-black">
                 {list.map((elem, i) => {
                   const { title } = elem; //destructed in react //
                   return (
-                    <li key={i} className="text-lg font-bold">
-                      {title}
+                    <li key={i} className="text-lg text-gray-500">
+                      <a href="#" className="hover:text-black">
+                        {title}
+                      </a>
                     </li>
                   );
                 })}
               </ul>
             </div>
           </div>
-          <div className="flex justify-center items-center space-x-4 lg:space-x-10 ">
-            <FaCartPlus className="text-2xl" />
-            <FaUserCircle className="text-2xl" />
-          </div>
+
+          <MobileResponsive clicked={clicked} setClicked={setClicked} list={list}/>
+          <LeftContainer />
         </div>
       </header>
     </>

diff --git a/src/Components/LeftContainer.jsx b/src/Components/LeftContainer.jsx
@@ -0,0 +1,16 @@
+import { FaCartPlus } from "react-icons/fa";
+import { FaUserCircle } from "react-icons/fa";
+
+function LeftContainer() {
+    return (
+
+        <div className="flex justify-center items-center space-x-4 lg:space-x-10 ">
+            {/* cart */}
+            <FaCartPlus className="text-2xl" />
+            {/* profile pic */}
+            <FaUserCircle className="text-2xl" />
+        </div>
+    )
+}
+
+export default LeftContainer
diff --git a/src/Components/Logo.jsx b/src/Components/Logo.jsx
@@ -0,0 +1,14 @@
+function Logo() {
+    return (
+        <div>
+            <p className="text-xl font-semibold font-mono">
+                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" className="bi bi-radar inline-block " viewBox="0 0 16 16">
+                    <path d="M6.634 1.135A7 7 0 0 1 15 8a.5.5 0 0 1-1 0 6 6 0 1 0-6.5 5.98v-1.005A5 5 0 1 1 13 8a.5.5 0 0 1-1 0 4 4 0 1 0-4.5 3.969v-1.011A2.999 2.999 0 1 1 11 8a.5.5 0 0 1-1 0 2 2 0 1 0-2.5 1.936v-1.07a1 1 0 1 1 1 0V15.5a.5.5 0 0 1-1 0v-.518a7 7 0 0 1-.866-13.847" />
+                </svg>
+                logo
+            </p>
+        </div>
+    )
+}
+
+export default Logo
diff --git a/src/Components/MobileResponsive.jsx b/src/Components/MobileResponsive.jsx
@@ -0,0 +1,41 @@
+import { RxCross1 } from "react-icons/rx";
+import clsx from "clsx";
+
+function MobileResponsive({ clicked, setClicked, list }) {
+    return (
+        <div
+            id="mobile-navbar"
+            className={clsx(
+                "fixed top-0 left-0 w-screen h-screen bg-black/20 backdrop-blur-sm transition-transform -translate-x-full",
+                clicked && "translate-x-0"
+            )}
+        >
+            <div className="bg-white w-4/5 h-screen p-7 ">
+
+                {/* cross icon  */}
+                <RxCross1
+                    id="Cross-icon"
+                    onClick={() => {
+                        setClicked(false);
+                    }}
+                    className="text-2xl mb-5 cursor-pointer "
+                />
+
+                <ul className="space-y-4 font-serif">
+                    {list.map((elem, i) => {
+                        const { title } = elem; //destructed in react //
+                        return (
+                            <li key={i} className="text-lg font-bold mt-11 text-center">
+                                <a href="#" className="uppercase text-gray-500 hover:text-black">
+                                    {title}
+                                </a>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default MobileResponsive