update

src/assets/icons/dark-crimson-hamburger-menu.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="42.098" height="52.867" viewBox="0 0 42.098 52.867">
+  <g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-364 -188)">
+    <g id="textalign-justifycenter" transform="translate(364 188)">
+      <path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+      <path id="Vector-4" data-name="Vector" d="M0,0H42.1V52.867H0Z" transform="translate(42.098 52.867) rotate(180)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/Header/desgin1/HeaderDesign1.js

@@ -4,6 +4,7 @@ import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
 import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
 import searchIcon from "../../../assets/icons/dark-crimson-search-box.svg";
 import lightGraySearchIcon from "../../../assets/icons/light-gray-search-box.svg";
+import darkCrimsonHamburgerMenu from "../../../assets/icons/dark-crimson-hamburger-menu.svg";
 import verticalLineIcon from "../../../assets/icons/dark-crimson-vertical-line.svg";
 
 const HeaderDesign1 = ({
@@ -24,26 +25,32 @@ const HeaderDesign1 = ({
   menuItems,
   category,
   searchBox,
+  topHeader,
+  bottomHeader,
 }) => {
   return (
     <header className="container mx-auto py-2 px-8 w-full bg-white rounded shadow-sm">
-      <div className="flex justify-between items-center mb-7">
+      {topHeader && (
-        <div className="">
+        <div className="flex justify-between items-center mb-2">
-          <span className="text-xs font-light ml-4 text-productPrice">
+          <div className="">
-            انتخاب کشور
+            <span className="text-xs font-light ml-4 text-productPrice">
-          </span>
+              انتخاب کشور
-          <span className="text-xs font-light text-productPrice">
+            </span>
-            پیگیری سفارش
+            <span className="text-xs font-light text-productPrice">
-          </span>
+              پیگیری سفارش
-        </div>
+            </span>
-        <div className="">
+          </div>
-          <span className="text-xs font-light text-productPrice">شکایات</span>
+          <div className="">
-          <span className="text-xs font-light mr-4 text-productPrice">
+            <span className="text-xs font-light text-productPrice ml-2 ">
-            ورود و ثبت نام
+              شکایات{" "}
-          </span>
+            </span>
+            <span className="text-xs font-light text-productPrice">
+              ورود و ثبت نام
+            </span>
+          </div>
         </div>
-      </div>
+      )}
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center relative">
         <div className="ml-10">
           <span className="text-sm font-bold text-productPrice ml-4">
             Design System
@@ -56,7 +63,7 @@ const HeaderDesign1 = ({
         </div>
         {menuItems && (
           <div
-            className="hidden lg:flex items-center justify-around flex-1"
+            className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
             style={{ maxWidth: 700 }}
           >
             <a href="#" className="text-productPrice text-xs">
@@ -81,19 +88,21 @@ const HeaderDesign1 = ({
         )}
         {searchBox && (
           <div
-            className="flex flex-row-reverse flex-1 items-center relative"
+            className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
-            style={{ maxWidth: 800 }}
+            style={{ maxWidth: 700 }}
           >
-            <img
+            <div className="flex flex-row-reverse items-center relative w-full">
-              src={lightGraySearchIcon}
+              <img
-              alt=""
+                src={lightGraySearchIcon}
-              className="w-4 h-4 absolute left-3"
+                alt=""
-            />
+                className="w-4 h-4 absolute left-3"
-            <input
+              />
-              type="text"
+              <input
-              placeholder="نام کالا را جستجو کنید..."
+                type="text"
-              className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
+                placeholder="نام کالا را جستجو کنید..."
-            />
+                className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
+              />
+            </div>
           </div>
         )}
         {loginBtn && (
@@ -129,6 +138,39 @@ const HeaderDesign1 = ({
           </div>
         )}
       </div>
+      {bottomHeader && (
+        <div className="flex items-center mt-4 relative w-full ">
+          <div className="ml-10 flex items-center">
+            <img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
+            <span className="text-xs text-productPrice mr-2">
+              دسته بندی ها کالاها
+            </span>
+          </div>
+          <div
+            className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            style={{ maxWidth: 700 }}
+          >
+            <a href="#" className="text-productPrice text-xs">
+              محصولات
+            </a>
+            <a href="#" className="text-productPrice text-xs">
+              دسته بندی
+            </a>
+            <a href="#" className="text-productPrice text-xs">
+              تماس با ما
+            </a>
+            <a href="#" className="text-productPrice text-xs">
+              درباره ما
+            </a>
+            <a href="#" className="text-productPrice text-xs">
+              پیگیری
+            </a>
+            <a href="#" className="text-productPrice text-xs">
+              وبلاگ
+            </a>
+          </div>
+        </div>
+      )}
     </header>
   );
 };
@@ -148,9 +190,12 @@ HeaderDesign1.defaultProps = {
   btnPY: "py-2",
   btnPX: "px-8",
 
-  menuItems: true,
+  topHeader: true,
+  bottomHeader: true,
+
+  menuItems: false,
   category: false,
-  searchBox: false,
+  searchBox: true,
   // icons
   loginBtn: false,