Add menu tabs

Author: bacurrah

src/Menu.css

@@ -7,7 +7,8 @@
   flex-flow: column nowrap;
   gap: 4px;
 
-  width: min(400px, max(300px, 25vw));
+  width: min-content;
+  /*max-width: max(400px, 25vw);*/
   height: calc(100% - 32px - 16px);
   padding: 8px;
 
@@ -33,6 +34,35 @@
   text-align: center;
 }
 
+.header {
+  height: fit-content;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+  padding: 4px;
+}
+
+.header-tab {
+  background-color: transparent;
+  border: none;
+  border-radius: 4px;
+  font-weight: 700;
+  color: #fffc;
+  padding: 4px 12px;
+  transition: back;
+  cursor: pointer;
+
+  transition: 0.15s background-color;
+}
+
+.header-tab.active,
+.header-tab:hover {
+  color: #fffe;
+  background-color: #fff2;
+
+  transition: 0.15s background-color;
+}
+
 .menu-item {
   display: flex;
   flex-flow: row nowrap;

src/Menu.tsx

@@ -5,13 +5,6 @@ import { AppContext } from "./App";
 import globalStyles from "./App.css";
 import styles from "./Menu.css";
 
-const testSettings = {
-  testNumber: 24,
-  testString: "Placeholder",
-  testBool: true,
-  testColor: "#8000ff",
-};
-
 function MenuItem<T>({
   name,
   initialValue,
@@ -97,42 +90,49 @@ function WidgetList() {
 }
 
 function WidgetSettings() {
-  const { widgets, setWidgets } = useContext(AppContext);
+  const { editing, widgets, setWidgets, saveTemplate } = useContext(AppContext);
 
   return (
     <>
-      {widgets.map((state) => {
-        return (
-          <>
-            <span>
-              {state.type.replace(/^./, (match) => match.toUpperCase())}
-            </span>
-            {Object.entries(state.settings).map(([key, value], i) => {
-              return (
-                <MenuItem
-                  key={i}
-                  name={key
-                    .replace(/([A-Z])/g, (match) => ` ${match}`)
-                    .replace(/([A-Za-z])(?=\d)/g, "$1 ")
-                    .replace(/^./, (match) => match.toUpperCase())
-                    .trim()}
-                  initialValue={value}
-                  onChange={(v) => {
-                    state.settings[key] = v;
-                    setWidgets([...widgets]);
-                  }}
-                ></MenuItem>
-              );
-            })}
-          </>
-        );
-      })}
+      {widgets.map((state, i) => (
+        <React.Fragment key={i}>
+          <span>
+            {state.type.replace(/^./, (match) => match.toUpperCase())}
+          </span>
+          {Object.entries(state.settings).map(([key, value], i) => (
+            <MenuItem
+              key={i}
+              name={key
+                .replace(/([A-Z])/g, (match) => ` ${match}`)
+                .replace(/([A-Za-z])(?=\d)/g, "$1 ")
+                .replace(/^./, (match) => match.toUpperCase())
+                .trim()}
+              initialValue={value}
+              onChange={(v) => {
+                state.settings[key] = v;
+                setWidgets([...widgets]);
+
+                if (!editing) saveTemplate();
+              }}
+            />
+          ))}
+        </React.Fragment>
+      ))}
     </>
   );
 }
 
+enum MenuTab {
+  Widget,
+  Add,
+  General,
+  Theme,
+  Template,
+}
+
 export default function Menu({ active }: { active: boolean }) {
   const appContext = useContext(AppContext);
+  const [activeTab, setActiveTab] = useState<MenuTab>(MenuTab.Widget);
 
   return (
     <div
@@ -142,8 +142,29 @@ export default function Menu({ active }: { active: boolean }) {
         active ? styles.active : "",
       ].join(" ")}
     >
-      {active && appContext.editing && <WidgetList></WidgetList>}
-      {!appContext.editing && <WidgetSettings></WidgetSettings>}
+      <div className={[globalStyles.container, styles.header].join(" ")}>
+        {Object.entries(MenuTab)
+          .filter(([k, v]) => isNaN(Number(k)))
+          .map(([key, value], i) => {
+            return (
+              <button
+                key={i}
+                className={[
+                  styles.headerTab,
+                  activeTab === (value as MenuTab) ? styles.active : "",
+                ].join(" ")}
+                onClick={() => setActiveTab(value as MenuTab)}
+              >
+                {key}
+              </button>
+            );
+          })}
+      </div>
+      {activeTab === MenuTab.Widget && <WidgetSettings></WidgetSettings>}
+      {activeTab === MenuTab.Add && active && <WidgetList></WidgetList>}
+      {![MenuTab.Widget, MenuTab.Add].includes(activeTab) && (
+        <span>No Settings Available</span>
+      )}
     </div>
   );
 }