setActiveItem(null)}
+ >
{category.map((item, i) => (
<>
@@ -19,45 +23,7 @@ export default function SidebarCategoryHover() {
>
{item.name}
- setActiveItem(item.id)}
- // style={{width : 1000}}
- >
- -
-
-
- {item.categories[0].name}
-
- {item.categories[0].list.map((item1, i) => (
- -
- {item1.name}
-
- ))}
- -
- {item.categories[1].name}
-
- {item.categories[1].list.map((item1, i) => (
- -
- {item1.name}
-
- ))}
-
-
-
-
-
-
-
+
>
))}
diff --git a/src/components/SidebarCategoryHover/list.js b/src/components/SidebarCategoryHover/list.js
new file mode 100644
index 0000000..6b0592c
--- /dev/null
+++ b/src/components/SidebarCategoryHover/list.js
@@ -0,0 +1,122 @@
+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 (
+
setActiveItem(item.id)}
+ >
+ {cols?.col1.length > 0 && }
+ {cols?.col2.length > 0 && }
+ {cols?.col3.length > 0 && }
+ {cols?.col4.length > 0 && }
+ {cols?.col5.length > 0 && }
+ {cols?.col6.length > 0 && }
+
+ );
+}