WIP Searchbar Design

src/display/components/searchbar.css

+.searchbar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+}
+
+.searchbar-icon {
+    font-size: 30px;
+}
+
+.searchbar-text {
+    overflow: hidden;
+    transition: width 0.2s ease-in-out;
+}
\ No newline at end of file

src/display/components/searchbar.tsx

+import React, { useEffect, useState } from "react";
+
+import "./searchbar.css";
+
+interface SearchBarProps {
+    minified: boolean;
+    searchTerms: string[];
+    onSearch?: (term: string) => void;
+}
+
+function SearchBar({ minified, searchTerms, onSearch }: SearchBarProps) {
+    const [isMinified, setMinified] = useState(minified);
+    const [width, setWidth] = useState<number>(100);
+    const [inputText, setInputText] = useState("");
+
+    const toggleMinified = () => {
+        setMinified((prev) => !prev);
+    };
+
+    useEffect(() => {
+        if (isMinified) {
+            setWidth(100);
+        } else {
+            setWidth(0);
+        }
+    }, [isMinified]);
+
+    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputText(e.target.value.toLowerCase());
+    };
+
+    return (
+        <div className={"searchbar"}>
+            <div className={"searchbar-icon"} onClick={toggleMinified}>
+                &#128269;
+            </div>
+            <div className={"searchbar-text"} style={{ width: width + "%" }}>
+                <form action={"#"}>
+                    <input
+                        type={"search"}
+                        placeholder={"Suchbegriff eingeben..."}
+                        onInput={handleInput}
+                    ></input>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default SearchBar;

src/display/display.css

@@ -12,12 +12,21 @@
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.display-fullscreen-button {
-    pointer-events: all;
+.display-icons {
     z-index: 99;
-    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
     left: 15px;
-    top: 5px;
+    top: 10px;
     position: absolute;
-    font-size: 30px;
+    gap: 20px;
 }
+
+.display-fullscreen-button {
+    pointer-events: all;
+    cursor: pointer;
+    font-size: 30px;
+    transform: rotate(-45deg);
+}
\ No newline at end of file

src/display/display.tsx

@@ -9,6 +9,7 @@ import Graph, { NodeData } from "./graph";
 import { loadGraphJson } from "../datasets";
 import NodeInfoBar from "./components/nodeinfo/nodeinfobar";
 import FilterMenu from "./components/nodefilter/filtermenu";
+import SearchBar from "./components/searchbar";
 
 /**
  * This component manages and renders a 3d-force-graph with additional menus to navigate, filter and view information on nodes.
@@ -112,13 +113,17 @@ class Display extends React.Component<
                 style={{ position: "relative" }}
                 ref={this.fullscreenRef}
             >
-                <div
-                    className={"display-fullscreen-button no-select"}
-                    title={"Vollbild"}
-                    onClick={this.toggleFullscreen.bind(this)}
-                >
-                    <p>&#10530;</p>
+                <div className={"display-icons"}>
+                    <div
+                        className={"display-fullscreen-button no-select"}
+                        title={"Vollbild"}
+                        onClick={this.toggleFullscreen.bind(this)}
+                    >
+                        &#10231;
+                    </div>
+                    <SearchBar minified={true} searchTerms={["a", "b", "c"]} />
                 </div>
+
                 {/*{this.graph && (*/}
                 {/*    <FilterOverlay graph={this.graph} type={"node"} />*/}
                 {/*)}*/}