mobileResponsive compoennt is added

harshsinghmumbai · Mar 9, 2024 · 7e84b07 · 7e84b07
1 parent b2c13d4
commit 7e84b07
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 31 deletions.
diff --git 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
@@ -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