From fbe8c76d92c579220c84e47443f84a722488631a Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <reza@Rezas-MacBook-Pro.local>
Date: Sat, 8 Jan 2022 15:42:53 +0330
Subject: [PATCH] reza pushed navbar

---
 src/Views/Home/Sidebar/index.js               |   2 +-
 .../Navbar/dark-crimson-cart-icon.svg         |   7 +
 .../Navbar/dark-crimson-hamburger-menu.svg    |  10 ++
 .../Navbar/dark-crimson-profile-icon.svg      |   8 +
 .../Navbar/dark-crimson-search-box.svg        |   5 +
 src/components/Navbar/index.js                | 143 ++++++++++++++++++
 .../Navbar/light-gray-search-box.svg          |   7 +
 src/components/Navbar/white-cart-icon.svg     |   7 +
 .../Navbar/white-hamburger-menu-icon.svg      |   9 ++
 src/redux/data.js                             |  12 ++
 10 files changed, 209 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Navbar/dark-crimson-cart-icon.svg
 create mode 100644 src/components/Navbar/dark-crimson-hamburger-menu.svg
 create mode 100644 src/components/Navbar/dark-crimson-profile-icon.svg
 create mode 100644 src/components/Navbar/dark-crimson-search-box.svg
 create mode 100644 src/components/Navbar/index.js
 create mode 100644 src/components/Navbar/light-gray-search-box.svg
 create mode 100644 src/components/Navbar/white-cart-icon.svg
 create mode 100644 src/components/Navbar/white-hamburger-menu-icon.svg

diff --git a/src/Views/Home/Sidebar/index.js b/src/Views/Home/Sidebar/index.js
index 45432fb..e9359f4 100644
--- a/src/Views/Home/Sidebar/index.js
+++ b/src/Views/Home/Sidebar/index.js
@@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) {
           className="w-full"
         />
       </header>
-      <ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full lg:overflow-y-scroll divide-blue-100 border-r border-gray-200">
+      <ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200">
         {list.map((material, index) => (
           <li
             key={index}
diff --git a/src/components/Navbar/dark-crimson-cart-icon.svg b/src/components/Navbar/dark-crimson-cart-icon.svg
new file mode 100644
index 0000000..151d5e0
--- /dev/null
+++ b/src/components/Navbar/dark-crimson-cart-icon.svg
@@ -0,0 +1,7 @@
+<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
+  <path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
+</svg>
diff --git a/src/components/Navbar/dark-crimson-hamburger-menu.svg b/src/components/Navbar/dark-crimson-hamburger-menu.svg
new file mode 100644
index 0000000..8d6c858
--- /dev/null
+++ b/src/components/Navbar/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>
diff --git a/src/components/Navbar/dark-crimson-profile-icon.svg b/src/components/Navbar/dark-crimson-profile-icon.svg
new file mode 100644
index 0000000..3879312
--- /dev/null
+++ b/src/components/Navbar/dark-crimson-profile-icon.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72.826" height="72.826" viewBox="0 0 72.826 72.826">
+  <g id="profile-circle" transform="translate(0 0)">
+    <path id="Vector" d="M10.317,19.875a2.922,2.922,0,0,0-.728,0,9.953,9.953,0,1,1,.728,0Z" transform="translate(26.46 18.904)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-2" data-name="Vector" d="M40.9,11.971a30.145,30.145,0,0,1-20.452,7.95A30.145,30.145,0,0,1,0,11.971C.3,9.118,2.124,6.327,5.371,4.142c8.314-5.523,21.909-5.523,30.162,0C38.78,6.327,40.6,9.118,40.9,11.971Z" transform="translate(15.961 46.836)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-3" data-name="Vector" d="M60.688,30.344A30.344,30.344,0,1,1,30.344,0,30.344,30.344,0,0,1,60.688,30.344Z" transform="translate(6.069 6.069)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H72.826V72.826H0Z" transform="translate(72.826 72.826) rotate(180)" fill="none" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/components/Navbar/dark-crimson-search-box.svg b/src/components/Navbar/dark-crimson-search-box.svg
new file mode 100644
index 0000000..ab021fe
--- /dev/null
+++ b/src/components/Navbar/dark-crimson-search-box.svg
@@ -0,0 +1,5 @@
+<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
+  <path id="Vector" d="M57.511,28.755A28.755,28.755,0,1,1,28.755,0,28.755,28.755,0,0,1,57.511,28.755Z" transform="translate(6.054 6.054)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-2" data-name="Vector" d="M6.054,6.054,0,0" transform="translate(60.538 60.537)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-3" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
+</svg>
diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js
new file mode 100644
index 0000000..283aacf
--- /dev/null
+++ b/src/components/Navbar/index.js
@@ -0,0 +1,143 @@
+import React from "react";
+
+import Search from "../Search";
+
+import cartIcon from "./dark-crimson-cart-icon.svg";
+import whiteCartIcon from "./white-cart-icon.svg";
+import profileIcon from "./dark-crimson-profile-icon.svg";
+import searchIcon from "./dark-crimson-search-box.svg";
+import lightGraySearchIcon from "./light-gray-search-box.svg";
+import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
+import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
+
+const HeaderDesign1 = ({
+  loginBtn,
+  menuItems,
+  category,
+  searchBox,
+  topHeader,
+  bottomHeader,
+  productCategoryTextColor,
+  menuItemsColor,
+}) => {
+  return (
+    <header className={`rounded-b-md w-full bg-transparent`}>
+      <>
+        {topHeader && (
+          <div className="flex justify-between items-center mb-2">
+            <div
+              className="divide-x flex flex-row-reverse transform translate-x-2"
+              style={{}}
+            >
+              <span className={`text-xs font-light px-2 text-gray-500`}>
+                انتخاب کشور
+              </span>
+              <span className={`text-xs font-light px-2text-gray-500`}>
+                پیگیری سفارش
+              </span>
+            </div>
+            <div className="">
+              <span className={`text-xs font-light ml-2text-gray-500`}>
+                شکایات&nbsp;
+              </span>
+              <span className={`text-xs font-lighttext-gray-500`}>
+                ورود و ثبت نام
+              </span>
+            </div>
+          </div>
+        )}
+        <div className="border-b border-lightGrayBorderColor mb-5"></div>
+      </>
+      <div className="flex justify-between items-center relative">
+        <div className="ml-10">
+          <span className={`text-sm font-bold ml-4 text-gray-700`}>
+            Design System
+          </span>
+          {category && (
+            <span className={`text-sm font-bold ${productCategoryTextColor}`}>
+              دسته بندی ها
+            </span>
+          )}
+        </div>
+        <div
+          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 }}
+        >
+          {menuItems?.map((item, index) => (
+            <a href="#" className="text-productPrice text-xs" key={index}>
+              {item}
+            </a>
+          ))}
+        </div>
+        {searchBox && (
+          <div
+            className="flex  w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+            style={{ maxWidth: 700 }}
+          >
+            <Search />
+          </div>
+        )}
+        {loginBtn && (
+          <div className="flex justify-end mr-7">
+            <button className={`ml-2 text-xs font-light`}>ورود</button>
+            {/* <img src={verticalLineIcon} alt="" className="" /> */}
+            <button className={`ml-2 text-xs font-light`}>ثبت نام</button>
+          </div>
+        )}
+        <div className="w-1/5	flex justify-end items-center ">
+          <img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
+          {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
+          <img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
+          <img src={profileIcon} alt="" className="w-5 h-5" />
+        </div>
+      </div>
+
+      {bottomHeader && (
+        <>
+          <div className="border-b border-lightGrayBorderColor mt-5"></div>
+          <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" />
+              <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
+              <span className={`text-xs mr-2 ${productCategoryTextColor}`}>
+                دسته بندی کالاها
+              </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 }}
+            >
+              {menuItems.map((item, index) => (
+                <a href="#" className={`text-xs ${menuItemsColor}`} key={index}>
+                  {item}
+                </a>
+              ))}
+            </div>
+          </div>
+        </>
+      )}
+    </header>
+  );
+};
+
+export default HeaderDesign1;
+
+HeaderDesign1.defaultProps = {
+  productCategoryTextColor: "text-productPrice",
+  menuItemsColor: "text-productPrice",
+  border: "border",
+  topHeader: true,
+  bottomHeader: true,
+  menuItems: [
+    "محصولات",
+    "دسته بندی",
+    "تماس با ما",
+    "درباره ما",
+    "پیگیری",
+    "وبلاگ",
+  ],
+  category: true,
+  searchBox: true,
+  // icons
+  loginBtn: true,
+};
diff --git a/src/components/Navbar/light-gray-search-box.svg b/src/components/Navbar/light-gray-search-box.svg
new file mode 100644
index 0000000..85194ac
--- /dev/null
+++ b/src/components/Navbar/light-gray-search-box.svg
@@ -0,0 +1,7 @@
+<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="38.895" height="38.895" viewBox="0 0 38.895 38.895">
+  <g id="search-normal">
+    <path id="Vector" d="M30.792,15.4A15.4,15.4,0,1,1,15.4,0,15.4,15.4,0,0,1,30.792,15.4Z" transform="translate(3.241 3.241)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M3.241,3.241,0,0" transform="translate(32.412 32.412)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H38.895V38.895H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>
diff --git a/src/components/Navbar/white-cart-icon.svg b/src/components/Navbar/white-cart-icon.svg
new file mode 100644
index 0000000..4e94683
--- /dev/null
+++ b/src/components/Navbar/white-cart-icon.svg
@@ -0,0 +1,7 @@
+<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
+  <path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+  <path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
+</svg>
diff --git a/src/components/Navbar/white-hamburger-menu-icon.svg b/src/components/Navbar/white-hamburger-menu-icon.svg
new file mode 100644
index 0000000..9206922
--- /dev/null
+++ b/src/components/Navbar/white-hamburger-menu-icon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="31.881" height="25.028" viewBox="0 0 31.881 25.028">
+  <g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-369.108 -201.5)">
+    <g id="textalign-justifycenter" transform="translate(364 193.088)">
+      <path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#fff" 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="#fff" 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="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/redux/data.js b/src/redux/data.js
index 16535c8..587a819 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -20,6 +20,7 @@ import Chart from "../components/Recharts";
 import CircularProgressbar from "../components/CircularProgressbar";
 import Stepper from "../components/Stepper";
 import Product from "../components/Product";
+import Navbar from "../components/Navbar";
 
 const components = [
   {
@@ -457,6 +458,17 @@ const components = [
       code : null,
     }
   },
+  {
+    name : "Navbar",
+    props : [
+
+    ],
+    content : {
+      name : "Navbar",
+      component : <Navbar />,
+      code : null,
+    }
+  },
 ];
 
 export default components;