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,10 +25,13 @@ 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="flex justify-between items-center mb-2">
           <div className="">
             <span className="text-xs font-light ml-4 text-productPrice">
               انتخاب کشور
@@ -37,13 +41,16 @@ const HeaderDesign1 = ({
             </span>
           </div>
           <div className="">
-          <span className="text-xs font-light text-productPrice">شکایات</span>
-          <span className="text-xs font-light mr-4 text-productPrice">
+            <span className="text-xs font-light text-productPrice ml-2 ">
+              شکایات{" "}
+            </span>
+            <span className="text-xs font-light text-productPrice">
               ورود و ثبت نام
             </span>
           </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,9 +88,10 @@ const HeaderDesign1 = ({
         )}
         {searchBox && (
           <div
-            className="flex flex-row-reverse flex-1 items-center relative"
-            style={{ maxWidth: 800 }}
+            className="flex flex-1 w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            style={{ maxWidth: 700 }}
           >
+            <div className="flex flex-row-reverse items-center relative w-full">
               <img
                 src={lightGraySearchIcon}
                 alt=""
@@ -95,6 +103,7 @@ const HeaderDesign1 = ({
                 className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400"
               />
             </div>
+          </div>
         )}
         {loginBtn && (
           <div className="flex justify-end mr-7">
@@ -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,