subcategory spoiler

shop/src/App.css

@@ -27,7 +27,19 @@ button:disabled {
 
    color: rgb(229, 229, 243);
  }
- /* .links li:hover {
+
+ .subCatalog .subLink li {
+  background-color: rgb(10, 10, 10);
+  border-color: rgb(248, 238, 238);
+  padding-left: 5px;
+ }
+
+.subCatalog {
+  list-style: none;
+}
+
+ /* .loginForm
+ .links li:hover {
   color: rgb(65, 65, 150);
  } */
 .header {
@@ -188,6 +200,7 @@ content {
   display: flex;
   flex-direction: column;
   margin: 5px;
+  padding: 25px;
   /* width: 70%; */
   padding: 35px;
   align-items: center;
@@ -321,7 +334,7 @@ button {
   }
   .oneGood h5 {
     font-size: 10px;
-    height: 25px;
+    height: 40px;
   }
   .oneGood img {
     width: 80px;
@@ -335,7 +348,7 @@ button {
     position: absolute;
     left: 0;
     right: 0;
-    padding: 10px;
+    /* padding: 10px; */
   }
   .goodCard img{
     width: 250px;

shop/src/components/catalog.js

@@ -6,11 +6,19 @@ import { bindActionCreators } from 'redux';
 import actionCatalogCard from './../reducers/reducerCat';
 
 
+const CatalogSubLink = ({name, arr}) => {
+    const [show, changeValue] = useState(false);
+    return(
+        <li><span  onClick = {() =>changeValue(!show)}>{name} </span>{<ul className="subCatalog">{ show && arr.map(key =>
+            <Links className = {"subLink"} key={key._id} url={`/catalog/` + key._id} text={key.name}> </Links>)}</ul>}</li>
+
+    )
+}
 
 
 const Catalog = ({ state, categories = [], getData = () => console.log("no") }) => {
     useEffect(() => categories.length == 0 && getData(), []);
-    //const [show, changeValue] = useState(false);
+
 
     return (
         <>
@@ -19,8 +27,10 @@ const Catalog = ({ state, categories = [], getData = () => console.log("no") })
                     category.subCategories == null ?
                         <Links key={category._id} url={`/catalog/` + category._id} text={category.name}> </Links> :
 
-                        <li>{category.name} {<ul className="catalog">{category.subCategories.map(subCategory =>
-                            <Links key={subCategory._id} url={`/catalog/` + subCategory._id} text={subCategory.name}> </Links>)}</ul>}</li>
+                         <CatalogSubLink name = {category.name} arr = {category.subCategories}/>
+
+                        // <li onClick = {() =>changeValue(!show)}>{category.name} { show &&  <ul className="catalog">{category.subCategories.map(subCategory =>
+                        //     <Links key={subCategory._id} url={`/catalog/` + subCategory._id} text={subCategory.name}> </Links>)}</ul>}</li>
 
                 )}
             </ul>
@@ -29,7 +39,7 @@ const Catalog = ({ state, categories = [], getData = () => console.log("no") })
 }
 
 const getCategories = state => {
-    console.log("state", state)
+    // console.log("state", state)
     if (state.promiseRed.categories && state.promiseRed.categories.payload) {
         return state.promiseRed.categories.payload.data.CategoryFind
     }

shop/src/components/goodCard.js

@@ -60,7 +60,7 @@ const actionGoodCard = (_id) => {
     const [startWidth, setStartwidth] = useState(true);
     const [finallyWidth, setFinallyWidth] = useState(true);
 
-    useEffect(() => startWidth !== finallyWidth &&    window.location.reload(), [startWidth, finallyWidth])
+    useEffect(() => startWidth !== finallyWidth && window.location.reload(), [startWidth, finallyWidth])
 
 
     window.onresize = () => {