Add topbar

components/TopBar.js

@@ -0,0 +1,18 @@
+import styles from "@/styles/topBar.module.css";
+
+const TopBar = (props) => {
+    const folders = ["Reacta", "Manufacturing", "Process Autodetector", "Trainer"];
+    return (
+        <div className="topBar">
+          {folders.map((folder, index) => (
+            <span key={index} className="folder">
+              {folder}
+              {index < folders.length - 1 && <span className="separator"> &gt; </span>}
+            </span>
+          ))}
+        </div>
+      );
+};
+
+
+export default TopBar;

pages/index.js

@@ -2,6 +2,7 @@ import Graph from "../components/Graph";
 import { useState } from "react";
 import { generateData, reactionStages } from "@/utils/dataGenerator";
 import styles from "@/styles/home.module.css";
+import TopBar from "@/components/TopBar";
 
 export default function Home() {
   const [{ dummyData, options }] = useState(generateData());
@@ -42,6 +43,7 @@ export default function Home() {
       </div>
       {/* Main Content */}
       <div className={styles.mainContent}>
+        <TopBar />
         <Graph data={dummyData} options={options} stages={stages} onStageUpdate={setStages}/>
       </div>
     </div>

styles/topBar.module.css

@@ -0,0 +1,12 @@
+.topBar {
+    flex-direction: row;
+    width: 100vw;
+    height: 100px;
+    background-color: azure;
+    margin-left: -100px;
+    margin-top: -100px;
+    margin-right: -100px;
+    top: 0; /* Position it at the top of the viewport */
+    left: 0; /* Start from the leftmost edge */
+    /* z-index: 1000; Ensure it stays above other elements */
+}