Implemented simple tab view

src/editor/components/sidepanel.tsx

@@ -10,6 +10,7 @@ import Instructions from "./instructions";
 import { Node } from "../../common/graph/node";
 import { NodeType, NodeTypeData } from "../../common/graph/nodetype";
 import { EditorSettings, NodeDataChangeRequest } from "../editor";
+import TabHeader from "./tabheader";
 
 interface SidepanelProps {
     graph: DynamicGraph;
@@ -62,26 +63,38 @@ function Sidepanel({
                 <button onClick={onSave}>Save</button>
             </div>
             <hr />
-            <NodeDetails
-                selectedNodes={selectedNodes}
-                idToObjectType={graph.idToObjectGroup}
-                onNodeDataChange={onNodeDataChange}
-                createCheckpoint={createCheckpoint}
-            />
-            <hr />
-            <NodeTypesEditor
-                nodeTypes={graph.objectGroups}
-                onNodeTypeSelect={onNodeTypeSelect}
-                onNodeTypeCreation={onNodeTypeCreation}
-                onNodeTypeDelete={onNodeTypeDelete}
-                onNodeTypeDataChange={onNodeTypeDataChange}
-                createCheckpoint={createCheckpoint}
-            />
-            <hr />
-            <Settings settings={settings} onSettingsChange={onSettingsChange} />
-            <hr />
+            <TabHeader tabs={["Edit", "Types", "Help"]}>
+                {/* Edit-Tab */}
+                <NodeDetails
+                    selectedNodes={selectedNodes}
+                    idToObjectType={graph.idToObjectGroup}
+                    onNodeDataChange={onNodeDataChange}
+                    createCheckpoint={createCheckpoint}
+                />
+
+                {/* Types-Tab */}
+                <NodeTypesEditor
+                    nodeTypes={graph.objectGroups}
+                    onNodeTypeSelect={onNodeTypeSelect}
+                    onNodeTypeCreation={onNodeTypeCreation}
+                    onNodeTypeDelete={onNodeTypeDelete}
+                    onNodeTypeDataChange={onNodeTypeDataChange}
+                    createCheckpoint={createCheckpoint}
+                />
+
+                {/* Help-Tab */}
+                <div>
+                    <Settings
+                        settings={settings}
+                        onSettingsChange={onSettingsChange}
+                    />
+                    <hr />
 
-            <Instructions connectOnDragEnabled={settings.connectOnDrag} />
+                    <Instructions
+                        connectOnDragEnabled={settings.connectOnDrag}
+                    />
+                </div>
+            </TabHeader>
         </div>
     );
 }

src/editor/components/tabheader.css

+div#ks-editor .tab-header {
+    display: flex;
+    margin-top: 0.2em;
+    margin-bottom: 0.5em;
+}
+
+div#ks-editor .tab-button {
+    display: block;
+
+    font-size: medium;
+    padding: 0.2em 0.5em;
+
+    border-bottom: 1px solid gray;
+    margin-bottom: 1px;
+
+    margin-right: 0.2em;
+
+    cursor: default;
+}
+
+div#ks-editor .tab-button:hover {
+    margin-bottom: 0px;
+    border-bottom: 2px solid gray;
+}
+
+div#ks-editor .tab-button.tab-open {
+    font-weight: bold;
+    margin-bottom: 0px;
+    border-bottom: 2px solid black;
+}

src/editor/components/tabheader.tsx

+import React, { useState } from "react";
+import "./tabheader.css";
+
+interface TabHeaderProps {
+    tabs: string[];
+    initialTabIndex?: number;
+    children: React.ReactNode[];
+}
+
+function TabHeader({ tabs, initialTabIndex, children }: TabHeaderProps) {
+    if (initialTabIndex === undefined) {
+        initialTabIndex = 0;
+    }
+
+    const [currentIndex, setCurrentIndex] = useState<number>(initialTabIndex);
+    return (
+        <div className={"tab-view"}>
+            <div className={"tab-header"}>
+                {tabs.map((name: string, index: number) => (
+                    <div
+                        key={index}
+                        className={
+                            index === currentIndex
+                                ? "tab-button tab-open"
+                                : "tab-button"
+                        }
+                        onClick={() => setCurrentIndex(index)}
+                    >
+                        {name}
+                    </div>
+                ))}
+            </div>
+            <div>{children[currentIndex]}</div>
+        </div>
+    );
+}
+
+export default TabHeader;