diff --git a/index.html b/index.html
index 0c589ec..3e21e5b 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Vite + React
+ My nav
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 9cff31e..7dbd7e8 100644
--- 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 (
<>
+
{
- setState(true);
+ setClicked(true);
}}
className="text-2xl lg:hidden"
/>
- logo
+
+
+
-
- {list.map((elem, i) => {
- const { title } = elem; //destructed in react //
- return (
- -
- {title}
-
- );
- })}
-
-
-
-
-
{
- setState(false);
- }}
- className="text-2xl mb-5 cursor-pointer "
- />
-
+
{list.map((elem, i) => {
const { title } = elem; //destructed in react //
return (
- -
- {title}
+
-
+
+ {title}
+
);
})}
-
-
-
-
+
+
+
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 (
+
+
+ {/* cart */}
+
+ {/* profile pic */}
+
+
+ )
+}
+
+export default LeftContainer
\ No newline at end of file
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 (
+
+ )
+}
+
+export default Logo
\ No newline at end of file
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 (
+
+
+
+ {/* cross icon */}
+
{
+ setClicked(false);
+ }}
+ className="text-2xl mb-5 cursor-pointer "
+ />
+
+
+ {list.map((elem, i) => {
+ const { title } = elem; //destructed in react //
+ return (
+ -
+
+ {title}
+
+
+ );
+ })}
+
+
+