diff --git a/src/Views/Home/Main/index.js b/src/Views/Home/Main/index.js
index dc66e46..6faca8d 100644
--- a/src/Views/Home/Main/index.js
+++ b/src/Views/Home/Main/index.js
@@ -7,9 +7,12 @@ function Main({ activeComponent }) {
-
+
{activeComponent?.content?.name}
+
+ {activeComponent?.name && `Designed by: ${activeComponent?.author}`}
+
{activeComponent?.content?.component}
{activeComponent?.content?.code && (
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"
/>
-
+
{list.map((material, index) => (
-
+
+
+
+
+
+
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 @@
+
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 @@
+
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 @@
+
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 (
+
+ );
+};
+
+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 @@
+
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 @@
+
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 @@
+
diff --git a/src/components/SidebarCategoryHover/list.js b/src/components/SidebarCategoryHover/list.js
index 21077ee..df435fb 100644
--- a/src/components/SidebarCategoryHover/list.js
+++ b/src/components/SidebarCategoryHover/list.js
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import _, { set } from "lodash";
-import Col from "./Col";
+import Col from "./col";
export default function List({ activeItem, item, setActiveItem, colLength }) {
const [cols, setCols] = useState(null);
diff --git a/src/redux/data.js b/src/redux/data.js
index 3e3263d..e32c647 100644
--- a/src/redux/data.js
+++ b/src/redux/data.js
@@ -20,11 +20,12 @@ 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";
import Calender from '../components/Calender';
-
const components = [
{
name : "Button",
+ author : 'Andalib',
props : [
],
@@ -36,6 +37,7 @@ const components = [
},
{
name : "Tag",
+ author : 'Andalib',
props : [
],
@@ -47,6 +49,7 @@ const components = [
},
{
name: "Input",
+ author : "Ashrafi",
props: [
{
name: "maxLength",
@@ -255,6 +258,7 @@ const components = [
},
{
name: "Search",
+ author: "Ashrafi",
props: [],
content: {
name: "Search",
@@ -264,6 +268,7 @@ const components = [
},
{
name: "Search with suggestion",
+ author : "Ashrafi",
props: [],
content: {
name: "Search with suggestion",
@@ -273,6 +278,7 @@ const components = [
},
{
name : "Radio",
+ author : "Ashrafi",
props : [
],
@@ -284,6 +290,7 @@ const components = [
},
{
name : "Checkbox",
+ author: "Ashrafi",
props : [
],
@@ -295,6 +302,7 @@ const components = [
},
{
name : "Select box - Radio",
+ author: "Ashrafi",
props : [
],
@@ -306,6 +314,7 @@ const components = [
},
{
name : "Select box - Checkbox",
+ author: "Ashrafi",
props : [
],
@@ -317,6 +326,7 @@ const components = [
},
{
name : "Switch",
+ author: "Ashrafi",
props : [
],
@@ -328,6 +338,7 @@ const components = [
},
{
name : "Expandable products filter",
+ author: "Ashrafi",
props : [
],
@@ -339,6 +350,7 @@ const components = [
},
{
name : "Sidebar catergory",
+ author: "Ashrafi",
props : [
],
@@ -350,6 +362,7 @@ const components = [
},
{
name : "Slider",
+ author: "Ashrafi",
props : [
],
@@ -361,6 +374,7 @@ const components = [
},
{
name : "Range",
+ author: "Ashrafi",
props : [
],
@@ -372,6 +386,7 @@ const components = [
},
{
name : "Counter",
+ author: "Andalib",
props : [
],
@@ -383,6 +398,7 @@ const components = [
},
{
name : "Alert",
+ author: "Andalib",
props : [
],
@@ -394,6 +410,7 @@ const components = [
},
{
name : "Toast",
+ author: "Andalib",
props : [
],
@@ -405,6 +422,7 @@ const components = [
},
{
name : "Star rating",
+ author: "Ashrafi",
props : [
],
@@ -416,6 +434,7 @@ const components = [
},
{
name : "Chart",
+ author: "Ashrafi",
props : [
],
@@ -427,6 +446,7 @@ const components = [
},
{
name : "Circular progressbar",
+ author: "Ashrafi",
props : [
],
@@ -438,6 +458,7 @@ const components = [
},
{
name : "Stepper",
+ author: "Ashrafi",
props : [
],
@@ -449,6 +470,7 @@ const components = [
},
{
name : "Product",
+ author: "Andalib",
props : [
],
@@ -469,6 +491,18 @@ const components = [
code : null,
}
},
+ {
+ name : "Navbar",
+ author: "Andalib",
+ props : [
+
+ ],
+ content : {
+ name : "Navbar",
+ component : ,
+ code : null,
+ }
+ },
];
export default components;