From 2669aa485355c50e87bbcee21c01b330ba7b9f35 Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Wed, 11 May 2022 15:51:38 +0430
Subject: [PATCH] update src/components/Navbar/HeaderDesign1/index.js and
 src/components/Navbar/HeaderDesign2/index.js

---
 src/components/Navbar/HeaderDesign1/index.js |   2 +-
 src/components/Navbar/HeaderDesign2/index.js | 148 ++++++-------------
 2 files changed, 45 insertions(+), 105 deletions(-)

diff --git a/src/components/Navbar/HeaderDesign1/index.js b/src/components/Navbar/HeaderDesign1/index.js
index a59e5c7..b4b95a6 100644
--- a/src/components/Navbar/HeaderDesign1/index.js
+++ b/src/components/Navbar/HeaderDesign1/index.js
@@ -127,7 +127,7 @@ HeaderDesign1.defaultProps = {
   ],
 
   category: false,
-  searchBox: false,
+  searchBox: true,
   // icons
   loginBtn: false,
 };
diff --git a/src/components/Navbar/HeaderDesign2/index.js b/src/components/Navbar/HeaderDesign2/index.js
index 205b9cf..2c0112c 100644
--- a/src/components/Navbar/HeaderDesign2/index.js
+++ b/src/components/Navbar/HeaderDesign2/index.js
@@ -1,94 +1,36 @@
 import React from "react";
-
-import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
-import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
-import profilePic from "./profile-pic.svg";
-import downwardArrow from "./arrow-down.svg";
-import search from "./search-normal.svg";
 import Switch from "../../Switch";
+import Search from "../../SearchDesign/Search";
 
-const HeaderDesign2 = ({ username, userJob }) => {
+const HeaderDesign2 = ({ username, userJob, menuItems }) => {
   return (
-    <header
-      className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm  bg-white`}
-    >
-      {/* {headerDivider && (
-        <div className="border-b border-lightGrayBorderColor mb-5"></div>
-      )} */}
-      <div className="flex justify-between items-center relative">
-        <div className="flex w-1/5">
-          <span className={`text-sm font-sansbold ml-4 pt-1 text-productPrice`}>
-            دانوین
-          </span>
-        </div>
-
-        <div className="flex items-center relative justify-self-start flex-1">
-          <div className="hidden lg:flex items-start justify-start    flex-1 ">
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              محصولات
-            </a>
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              دسته بندی
-            </a>
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              تماس با ما
-            </a>
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              درباره ما
-            </a>
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              پیگیری
-            </a>
-            <a href="#" className={`text-xs text-productPrice mx-3`}>
-              وبلاگ
-            </a>
-          </div>
+    <header className="w-full p-4 bg-white shadow-sm">
+      <div className="flex flex-row items-center justify-between">
+        {/* right side */}
+        <div className="flex flex-1 flex-row items-center">
+          <span className="text-sm font-sansbold ml-5">دانوین</span>
+          <ul class="flex flex-row items-center gap-x-5">
+            {menuItems.map((menuItem, index) => (
+              <li
+                key={index}
+                class="group text-sm p-1 transition ease-in duration-300 transform hover:-translate-y-1 hover:text-[#B24592] cursor-pointer"
+              >
+                {menuItem.item}
+                <div class="h-0.5 bg-gradient-to-r from-[#F15F79] to-[#B24592] scale-x-0 group-hover:scale-100 transition-transform origin-right rounded-full duration-700 ease-in-out group"></div>
+              </li>
+            ))}
+          </ul>
         </div>
-
-        <div className="flex justify-end items-center ">
-          <div className="ml-4">
+        {/* left side */}{" "}
+        <div className="flex justify-end items-center gap-x-5">
+          <div className="">
             <Switch />
           </div>
-          <div className="flex flex-row-reverse items-center relative w-60 ml-3">
-            <img
-              src={search}
-              alt=""
-              className="w-5 h-5 absolute left-3 cursor-pointer"
-            />
-            <input
-              type="text"
-              placeholder="جستجو در پنل کاربری..."
-              className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
-            />
+          <div className="w-fit">
+            <Search />
           </div>
-          {/* <div class="flex justify- ">
-            <div class="form-check form-switch">
-              <input
-                class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm"
-                type="checkbox"
-                role="switch"
-                id="flexSwitchCheckChecked"
-                checked
-              />
-            </div>
-          </div> */}
-          {/* <p className={`text-xs ml-2 text-product>Price`}>
-              140,000
-              <span className={`text-xs font-light text-productPrice`}>
-                تومان
-              </span>
-            </p> */}
-          {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
-          {/* <img src={searchIcon} alt="" className="w-7 h-5 ml-2" /> */}
-          <img src={cartIcon} alt="" className="w-7 h-5 ml-2" />
-          {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
-          {/* <button
-            className={`ml-2 text-xs font-light border rounded-md py-2 px-8 bg-white border-darkCrimsonBorderColor text-productPrice`}
-          >
-            ورود
-          </button> */}
           <div className="flex flex-row items-center">
-            <div className=" flex-col flex-1 mr-3">
+            <div className=" flex-col flex-1">
               <p className="text-blue-900 text-sm">{username}</p>
               <p className="text-blue-700 text-xs">{userJob}</p>
             </div>
@@ -115,26 +57,24 @@ HeaderDesign2.defaultProps = {
   username: "رستم پهلوان زاده",
   userJob: "مدیریت سامانه هوشمند",
 
-  headerDivider: true,
-
-  topHeader: true,
-  bottomHeader: true,
-
-  menuItems: false,
-  category: false,
-  searchBox: true,
-
-  // icons
-  loginBtn: true,
-
-  whiteIconCart: false,
-  darkCrimsonIconCart: false,
-
-  whiteIconHamburgerMenu: false,
-  darkIconHamburgerMenu: true,
-
-  iconHolder: true,
-  iconProfile: false,
-  iconCart: true,
-  iconSearch: false,
+  menuItems: [
+    {
+      item: "محصولات",
+    },
+    {
+      item: "دسته بندی",
+    },
+    {
+      item: "تماس با ما",
+    },
+    {
+      item: "درباره ما",
+    },
+    {
+      item: "پیگیری",
+    },
+    {
+      item: "وبلاگ",
+    },
+  ],
 };