From 732ab51970793e2875efb911f0f89e67791a3a30 Mon Sep 17 00:00:00 2001
From: nabin <nabin123456j@gmail.com>
Date: Sat, 9 Mar 2024 20:51:43 +0545
Subject: [PATCH 1/5] logo component added

---
 src/Components/Header.jsx | 34 +++++++++++++++++-----------------
 src/Components/Logo.jsx   | 14 ++++++++++++++
 2 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/Logo.jsx

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 9cff31e..4da9256 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -1,9 +1,10 @@
 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 LeftContainer from "./LeftContainer";
+import Logo from "./Logo";
+
 
 const Header = () => {
   const [state, setState] = useState(false);
@@ -25,19 +26,21 @@ const Header = () => {
               }}
               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 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>
           <div
             id="mobile-navbar"
@@ -66,10 +69,7 @@ const Header = () => {
               </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>
+          <LeftContainer />
         </div>
       </header>
     </>
diff --git a/src/Components/Logo.jsx b/src/Components/Logo.jsx
new file mode 100644
index 0000000..13d7974
--- /dev/null
+++ 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
\ No newline at end of file

From 55c24c6ec94ee922ce85d09ca91130aaf98ea420 Mon Sep 17 00:00:00 2001
From: nabin <nabin123456j@gmail.com>
Date: Sat, 9 Mar 2024 20:52:03 +0545
Subject: [PATCH 2/5] left container comp is added for cart and profile logo

---
 src/Components/LeftContainer.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/Components/LeftContainer.jsx

diff --git a/src/Components/LeftContainer.jsx b/src/Components/LeftContainer.jsx
new file mode 100644
index 0000000..bf1be14
--- /dev/null
+++ 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
\ No newline at end of file

From 781a60911418fc2821ab24a6f8df15ba63ec9ea0 Mon Sep 17 00:00:00 2001
From: nabin <nabin123456j@gmail.com>
Date: Sat, 9 Mar 2024 20:55:55 +0545
Subject: [PATCH 3/5] state name changed

---
 src/Components/Header.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 4da9256..9d51495 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -7,7 +7,7 @@ import Logo from "./Logo";
 
 
 const Header = () => {
-  const [state, setState] = useState(false);
+  const [clicked, setClicked] = useState(false);
   const list = [
     { title: "Collection" },
     { title: "men" },
@@ -22,7 +22,7 @@ const Header = () => {
             <GiHamburgerMenu
               id="hamburger"
               onClick={() => {
-                setState(true);
+                setClicked(true);
               }}
               className="text-2xl lg:hidden"
             />
@@ -46,14 +46,14 @@ const Header = () => {
             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"
+              clicked && "translate-x-0"
             )}
           >
             <div className="bg-white w-3/5 h-full p-7 ">
               <RxCross1
                 id="Cross-icon"
                 onClick={() => {
-                  setState(false);
+                  setClicked(false);
                 }}
                 className="text-2xl mb-5 cursor-pointer "
               />

From b2c13d41f28c48a4357399998e7985f11009364f Mon Sep 17 00:00:00 2001
From: nabin <nabin123456j@gmail.com>
Date: Sat, 9 Mar 2024 21:32:27 +0545
Subject: [PATCH 4/5] title changed

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 0c589ec..3e21e5b 100644
--- 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>

From 7e84b078133639ed53dde17589210b2be6d6768b Mon Sep 17 00:00:00 2001
From: nabin <nabin123456j@gmail.com>
Date: Sat, 9 Mar 2024 21:33:44 +0545
Subject: [PATCH 5/5] mobileResponsive compoennt is added

---
 src/Components/Header.jsx           | 44 +++++++++--------------------
 src/Components/MobileResponsive.jsx | 41 +++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 src/Components/MobileResponsive.jsx

diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 9d51495..7dbd7e8 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -1,24 +1,29 @@
-import { GiHamburgerMenu } from "react-icons/gi";
-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 [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={() => {
@@ -35,40 +40,17 @@ const Header = () => {
                   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",
-              clicked && "translate-x-0"
-            )}
-          >
-            <div className="bg-white w-3/5 h-full p-7 ">
-              <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">
-                      {title}
+                      <a href="#" className="hover:text-black">
+                        {title}
+                      </a>
                     </li>
                   );
                 })}
               </ul>
             </div>
           </div>
+
+          <MobileResponsive clicked={clicked} setClicked={setClicked} list={list}/>
           <LeftContainer />
         </div>
       </header>
diff --git a/src/Components/MobileResponsive.jsx b/src/Components/MobileResponsive.jsx
new file mode 100644
index 0000000..a38a4e8
--- /dev/null
+++ 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
\ No newline at end of file