Navigation Bar Links Linked

src/components/Navbar/index.js

@@ -211,7 +211,7 @@ function Navbar({
     </div>
   ) : (
     <header className={`rounded-b-md w-full bg-transparent pb-4`}>
-      <div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-6">
+      <div className="flex flex-row justify-between items-center border-b border-gray-200 border-solid h-16 px-20">
         <div className="divide-x flex flex-row-reverse transform translate-x-2">
           <span className="text-sm font-normal text-blue52 mr-6">
             انتخاب کشور
@@ -232,7 +232,7 @@ function Navbar({
           desktopMiddleFix ? "" : ""
         }`}
       >
-        <div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
+        <div className="w-full flex flex-row items-center px-20 h-full relative bg-white justify-between py-4 px-5 z-20 border-b border-gray-200 border-solid ">
           <div className="ml-10">
             <span className={`text-sm font-bold ml-4 text-gray-700 flex items-center`}>
             <Link
@@ -264,7 +264,7 @@ function Navbar({
         </div>
 
         <div
-         className={`flex items-center relative w-full h-10 px-4  border-b border-solid border-gray-200 transform bg-white ${
+         className={`flex items-center relative w-full h-10 px-20  border-b border-solid border-gray-200 transform bg-white ${
             desktopEndTransform ? "" : ""
           }`}
           style={{
@@ -286,7 +286,7 @@ function Navbar({
             className="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: "calc(100vw / 2)" }}
           >
-            {menuItems.map((item, index) => (
+            {/* {menuItems.map((item, index) => (
               <a
                 href="#"
                 className={`text-sm text-blue52 ${menuItemsColor}`}
@@ -294,7 +294,15 @@ function Navbar({
               >
                 {item}
               </a>
-            ))}
+            ))} */}
+
+            {
+              pages.map((item, index) => (
+                <Link to={item.link} className={`text-sm text-blue52 ${menuItemsColor}`} key={'nav' + index}>
+                  {item.name}
+                </Link>
+              ))
+            }
           </div>
         </div>
       </div>
@@ -312,6 +320,10 @@ export default connect(mapStateToProps, {})(Navbar);
 
 Navbar.defaultProps = {
   pages: [
+    {
+      link: '/',
+      name: 'خانه'
+    },
     {
       link: "/products",
       name: "محصولات",