Added state to set some menu groups as collapsed by default

Author: Patchnote-v2

src/frontend/src/Keybinds.js

@@ -97,23 +97,32 @@ const Keybinds = (data) => {
                             </li>
                         );
                     });
+                    let menuClasses = "menu";
+                    let hamburgerClasses = "hamburger hamburger--minus"
+                    if (data.toggledMenus.includes(value)) {
+                        menuClasses += " collapsed";
+                    }
+                    else {
+                        hamburgerClasses += " is-active";
+                    }
+
                     return (
-                        <div key={value} className="menu">
+                        <div key={value} className={menuClasses}>
                             <span>
                                 <h3 onClick={(event) => data.selectMenu(event)}
                                     onMouseOver={(event) => data.hoverMenu(event)}
                                     onMouseOut={(event) => data.hoverMenu(event)}
                                     className="menu-header"
                                     value={value}>
                                     {value}
-                                    <span className="hamburger hamburger--minus is-active" onClick={(event) => data.toggleMenu(event)} value={value}>
+                                    <span className={hamburgerClasses} onClick={(event) => data.toggleMenu(event)} value={value}>
                                         <span className="hamburger-box">
                                             <span className="hamburger-inner"></span>
                                         </span>
                                     </span>
                                 </h3>
                             </span>
-                            <ul className="menuList">
+                            <ul className="menu-list">
                                 {menuRows}
                             </ul>
                         </div>

src/frontend/src/Upload.js

@@ -29,6 +29,14 @@ const Upload = (props) => {
     const [filteringRows, setFilteringRows] = useState(false);
     const [searchFilter, setSearchFilter] = useState(null);
 
+    const [toggledMenus, setToggledMenus] = useState([
+        "Control Groups 1-10",
+        "Control Groups 11-20",
+        "Spectator/Replay Commands",
+        "BFG: Other",
+        "BFG: Techs"
+    ]);
+
     const notifications = useRef(null);
     const clear = useRef(null); // Button
     const cancel = useRef(null); // Button
@@ -676,6 +684,19 @@ const Upload = (props) => {
         event.target.classList.toggle("is-active");
         let menu = event.target.closest(".menu");
         menu.classList.toggle("collapsed");
+
+        //let name = menu.getAttribute("value");
+        //setToggledMenus((oldToggledMenus) => {
+        //    let newToggledMenus = [...oldToggledMenus];
+        //    let index = newToggledMenus.indexOf(name);
+        //    if (index > -1) {
+        //        newToggledMenus.splice(index, 1);
+        //    }
+        //    else {
+        //        newToggledMenus.push(name);
+        //    }
+        //    return newToggledMenus;
+        //})
     }
 
     const onSearchInput = (event) => {
@@ -815,7 +836,8 @@ const Upload = (props) => {
                   toggleMenu={toggleMenu}
                   highlighted={highlighted}
                   searchFilter={searchFilter}
-                  toggleFavorite={toggleFavorite}/>
+                  toggleFavorite={toggleFavorite}
+                  toggledMenus={toggledMenus} />
         </>
     );
 };

src/frontend/src/scss/index.scss

@@ -302,7 +302,7 @@ $key-transition-time: 0.1s;
       padding: 10px;
     }
 
-    .menuList {
+    .menu-list {
       overflow: hidden;
       margin: 0;
       padding: 0;