update data.js

src/components/ProductCategories/SidebarCategoryHover/Col.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function Col({ data, colLength }) {
+  const length = data?.length;
+  return (
+    <li className="h-full flex flex-col px-2 w-40 bg-white">
+      {data?.map((product, i) => (
+        <>
+          <li
+            className="flex items-center text-right cursor-pointer text-md"
+            style={{ minHeight: `calc(100% / ${colLength})` }}
+          >
+            {product.name}
+          </li>
+          {product.list.map((item1, i) => (
+            <li
+              key={i}
+              className="text-normal justify-center cursor-pointer items-center text-sm font-normal text-gray-400 hover:bg-blue-50"
+              style={{ minHeight: `calc(100% / ${colLength})`,  }}
+            >
+              {item1.name}
+            </li>
+          ))}
+        </>
+      ))}
+    </li>
+  );
+}

src/components/ProductCategories/SidebarCategoryHover/index.js

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import category from "./data";
+import List from "./list";
+import _ from "lodash";
+
+export default function SidebarCategoryHover() {
+  const [activeItem, setActiveItem] = useState(null);
+
+  const arrayLength = category.length;
+
+  return (
+    <div
+      className="flex flex-col w-60 relative my-2 bg-white"
+      onMouseOut={() => setActiveItem(null)}
+    >
+      <ul className="list-none w-full divide-y border divide-gray-200">
+        {category.map((item, i) => (
+          <>
+            <li
+              className="p-4 w-full text-gray-500 font-normal text-sm hover:bg-blue-100 text-right"
+              key={i}
+              onMouseOver={() => setActiveItem(item.id)}
+            >
+              {item.name}
+            </li>
+            <List
+              activeItem={activeItem}
+              item={item}
+              setActiveItem={setActiveItem}
+              colLength={9}
+            />
+          </>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/components/ProductCategories/SidebarCategoryHover/list.js

@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from "react";
+import _, { set } from "lodash";
+import Col from "./Col";
+
+export default function List({ activeItem, item, setActiveItem, colLength }) {
+  const [cols, setCols] = useState(null);
+  const [disable, setDisable] = useState(false);
+
+  useEffect(() => {
+    let vCols = {
+      col1: [],
+      col2: [],
+      col3: [],
+      col4: [],
+      col5: [],
+      col6: [],
+    };
+    let index = 1;
+    for (let category of item.categories) {
+      if (index === 1) {
+        let col1 = vCols.col1;
+        let col1Length = col1.length;
+        col1.forEach((colsItem) => {
+          col1Length = col1Length + colsItem.list.length;
+        });
+        if (col1Length === colLength) {
+          index = 2;
+        } else {
+          col1 = [...col1, category];
+          vCols = { ...vCols, col1: col1 };
+        }
+      }
+      if (index === 2) {
+        let col2 = vCols.col2;
+        let col2Length = col2.length;
+        col2.forEach((colsItem) => {
+          col2Length = col2Length + colsItem.list.length;
+        });
+        if (col2Length === colLength) {
+          index = 3;
+        } else {
+          col2 = [...col2, category];
+          vCols = { ...vCols, col2: col2 };
+        }
+      }
+      if (index === 3) {
+        let col3 = vCols.col3;
+        let col3Length = col3.length;
+        col3.forEach((colsItem) => {
+          col3Length = col3Length + colsItem.list.length;
+        });
+        if (col3Length === colLength) {
+          index = 4;
+        } else {
+          col3 = [...col3, category];
+          vCols = { ...vCols, col3: col3 };
+        }
+      }
+      if (index === 4) {
+        let col4 = vCols.col4;
+        let col4Length = col4.length;
+        col4.forEach((colsItem) => {
+          col4Length = col4Length + colsItem.list.length;
+        });
+        if (col4Length === colLength) {
+          index = 5;
+        } else {
+          col4 = [...col4, category];
+          vCols = { ...vCols, col4: col4 };
+        }
+      }
+      if (index === 5) {
+        let col5 = vCols.col5;
+        let col5Length = col5.length;
+        col5.forEach((colsItem) => {
+          col5Length = col5Length + colsItem.list.length;
+        });
+        if (col5Length === colLength) {
+          index = 6;
+        } else {
+          col5 = [...col5, category];
+          vCols = { ...vCols, col5: col5 };
+        }
+      }
+      if (index === 6) {
+        let col6 = vCols.col6;
+        let col6Length = col6.length;
+        col6.forEach((colsItem) => {
+          col6Length = col6Length + colsItem.list.length;
+        });
+        if (col6Length === colLength) {
+          index = 7;
+        } else {
+          col6 = [...col6, category];
+          vCols = { ...vCols, col6: col6 };
+        }
+      } else {
+        setCols(() => vCols);
+      }
+    }
+  }, []);
+
+  return (
+    <ul
+      className={_.join(
+        [
+          "absolute right-60 top-0 h-full border flex flex-row justify-between",
+          activeItem === item.id ? "flex" : "hidden",
+        ],
+        " "
+      )}
+      // style={{minWidth : 'calc(100vw - 260px )'}}
+      onMouseOver={() => setActiveItem(item.id)}
+    >
+      {cols?.col1.length > 0 && <Col data={cols?.col1} colLength={colLength} key={0} />}
+      {cols?.col2.length > 0 && <Col data={cols?.col2} colLength={colLength} key={1} />}
+      {cols?.col3.length > 0 && <Col data={cols?.col3} colLength={colLength} key={2}  />}
+      {cols?.col4.length > 0 && <Col data={cols?.col4} colLength={colLength} key={3}  />}
+      {cols?.col5.length > 0 && <Col data={cols?.col5} colLength={colLength} key={4}  />}
+      {cols?.col6.length > 0 && <Col data={cols?.col6} colLength={colLength} key={5}  />}
+    </ul>
+  );
+}

src/components/ProductCategories/index.js

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+
+import SidebarCategoryHover from "./SidebarCategoryHover";
+
+function ProductCategories() {
+  const list = {
+    1: <SidebarCategoryHover />,
+  };
+  const [type, setType] = useState(1);
+  return (
+    <div className="w-full flex flex-col items-start">
+      <select
+        className="mb-10 w-20 bg-gray-200"
+        onChange={(e) => setType(e.target.value)}
+      >
+        {Object.keys(list).map((option, index) => (
+          <option key={index}>{option}</option>
+        ))}
+      </select>
+      {list[type]}
+    </div>
+  );
+}
+
+export default ProductCategories;

src/redux/data.js

@@ -33,6 +33,7 @@ import Range from "../components/Range";
 import Datepicker from "../components/Datepicker";
 import SearchWithSuggestion from "../components/SearchWithSuggestion";
 import SelectBox from "../components/SelectBox";
+import ProductCategories from "../components/ProductCategories";
 
 // mini components
 import MiniComponents from "../components/MiniComponents";
@@ -666,6 +667,16 @@ const components = [
       code: null,
     },
   },
+  {
+    name: "Product Categories",
+    author: "Ashrafi",
+    props: [],
+    content: {
+      name: "Product Categories",
+      component: <ProductCategories />,
+      code: null,
+    },
+  },
   {
     name: "Select Box",
     author: "Ashrafi",