Settings Page and About Page in Settings Page

public/electron.js

@@ -31,7 +31,9 @@ const menuBar = [
     submenu: [
       {
         label: 'About Incogine Editor',
-        role: 'about'
+        click: () => {
+          mainWindow.webContents.executeJavaScript('window.SettingsPage("about")')
+        }
       },
       { type: 'separator' },
       { role: 'services' },

src/App.js

@@ -116,9 +116,9 @@ function App() {
 
   const [notifyNotTauri, setnotifyNotTauri] = useState(false);
 
-  window.SettingsPage = function () {
+  window.SettingsPage = function (content) {
     if (!docsState.docs.some(doc => doc.type === "settings")) {
-      window.AddTab(true, { title: "Settings", file: null, content: null, saved: true, type: "settings" })
+      window.AddTab(true, { title: "Settings", file: null, content: "about", saved: true, type: "settings" })
     }
   }
 
@@ -248,7 +248,7 @@ function App() {
       <section >
         <article style={{ paddingTop: "36px" }}>
           {docsState.docs[docsState.selected].type === "text/code" ? <TextArea docs={docsState} setDocs={setDocsState} /> : null}
-          {docsState.docs[docsState.selected].type === "settings" ? <Settings winsize={winsize} /> : null}
+          {docsState.docs[docsState.selected].type === "settings" ? <Settings winsize={winsize} docs={docsState} setDocs={setDocsState} /> : null}
         </article>
       </section>
       {notifyNotTauri ? <NotifyWindow header={"You are using a browser version of Incogine Editor"} body={"Please switch to the application for more features"} accept={() => setnotifyNotTauri(false)} /> : null}

src/components/Settings/settings.css

@@ -1,4 +1,40 @@
 .settingspage-cont {
     position: fixed;
     background-color: rgb(66, 66, 66);
+}
+
+.settings-lists {
+    color: white;
+}
+
+.settings-lists ul {
+    list-style-type: none;
+    position: absolute;
+    margin: 0;
+    margin-top: 10px;
+    left: -30px;
+    width: 180px;
+    overflow-y: scroll;
+}
+
+.settings-lists li {
+    text-decoration: none;
+    background-color: #a2a2a2;
+    width: 150px;
+    padding: 10px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    user-select: none;
+    cursor: pointer;
+}
+
+#settingWindowContent {
+    position: absolute;
+    top: 0px;
+    left: 190px;
+    background-color: #313131;
+    color: white;
+    padding-left: 10px;
 }

src/components/Settings/settings.js

@@ -1,13 +1,52 @@
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import './settings.css';
 
+function SettingList(props) {
+    let oldprops = [...props.docs.docs];
+    return (
+        <div className="settings-lists">
+            <ul style={{ height: props.size.height - 67 }}>
+
+                <li onClick={() => {
+                    oldprops[props.docs.selected] = {
+                        title: "Settings",
+                        file: null,
+                        content: "about",
+                        saved: true,
+                        type: "settings",
+                    }
+
+                    props.setCateg({ selected: props.docs.selected, docs: [...oldprops] })
+                }}>About</li>
+
+            </ul>
+        </div>
+    )
+}
+
+function SettingWindow(props) {
+    function AboutPage() {
+        return (<div >
+            <h1>Incogine Editor v0.1.0</h1>
+            <span>© 2022 leafstudiosDot</span>
+        </div>)
+    }
+
+    return (
+        <div id="settingWindowContent" style={{ height: props.size.height - 57, width: props.size.width - 191 }}>
+            {props.docs.docs[props.docs.selected].content === "about" ? <AboutPage /> : null}
+        </div>
+    )
+}
+
 export default function SettingsPage(props) {
     return (
         <div className="settingspage-cont" style={{
             width: props.winsize.width,
             height: props.winsize.height - 56
         }}>
-
+            <SettingList size={props.winsize} docs={props.docs} setCateg={props.setDocs} />
+            <SettingWindow size={props.winsize} docs={props.docs} />
         </div>
     )
 }