Removed menubar edit and file, added all into the project name

src/frontend/src/App.tsx

@@ -126,8 +126,8 @@ export default function App() {
         }}
         FallbackComponent={CrashErrorComponent}
       >
-            <Header />
-            <Router />
+        <Header />
+        <Router />
       </ErrorBoundary>
       <div></div>
       <div

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -0,0 +1,156 @@
+import React, { useContext } from "react";
+import { TabsContext } from "../../../../contexts/tabsContext";
+import { PopUpContext } from "../../../../contexts/popUpContext";
+import { Save, Edit, Upload, Download, Code, Plus } from "lucide-react";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarLabel,
+  MenubarSeparator,
+} from "../../../ui/menubar";
+
+import RenameLabel from "../../../ui/rename-label";
+import _ from "lodash";
+import ImportModal from "../../../../modals/importModal";
+import ExportModal from "../../../../modals/exportModal";
+import ApiModal from "../../../../modals/ApiModal";
+import { alertContext } from "../../../../contexts/alertContext";
+import { updateFlowInDatabase } from "../../../../controllers/API";
+import { Link } from "react-router-dom";
+
+export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
+  const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
+  const { setErrorData } = useContext(alertContext);
+  const { openPopUp } = useContext(PopUpContext);
+
+  function handleSaveFlow(flow) {
+    try {
+      updateFlowInDatabase(flow);
+      // updateFlowStyleInDataBase(flow);
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
+
+  function handleAddFlow() {
+    try {
+      addFlow();
+      // saveFlowStyleInDataBase();
+    } catch (err) {
+      setErrorData(err);
+    }
+  }
+  let current_flow = flows.find((flow) => flow.id === tabId);
+
+  // robot emoji
+  let emoji = current_flow.style?.emoji || "🤖";
+  let color = current_flow.style?.color || "bg-blue-200";
+
+  return (
+          <Menubar>
+            <MenubarMenu>
+              <MenubarTrigger className="px-1">
+              <RenameLabel
+              value={current_flow.name}
+              setValue={(value) => {
+                if (value !== "") {
+                  let newFlow = _.cloneDeep(current_flow);
+                  newFlow.name = value;
+                  updateFlow(newFlow);
+                }
+              }}
+              rename={rename}
+              setRename={setRename}
+            />
+            
+              </MenubarTrigger>
+              <MenubarContent>
+                <MenubarLabel>
+                  File
+                </MenubarLabel>
+                <MenubarItem
+                  onClick={() => {
+                    openPopUp(<ImportModal />);
+                  }}
+                >
+                  <Upload className="w-4 h-4 mr-2" />
+                  Import
+                </MenubarItem>
+                <MenubarItem
+                  onClick={() => {
+                    openPopUp(<ExportModal />);
+                  }}
+                >
+                  <Download className="w-4 h-4 mr-2" />
+                  Export
+                </MenubarItem>
+                <MenubarItem
+                  onClick={() => {
+                    openPopUp(<ApiModal flow={current_flow} />);
+                  }}
+                >
+                  <Code className="w-4 h-4 mr-2" />
+                  Code
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarLabel>
+                  Edit
+                </MenubarLabel>
+                <MenubarItem
+                  onClick={() => {
+                    handleSaveFlow(current_flow);
+                  }}
+                >
+                  <Save className="w-4 h-4 mr-2" />
+                  Save
+                </MenubarItem>
+                <MenubarItem
+                  onClick={() => {
+                    setRename(true);
+                  }}
+                >
+                  <Edit className="w-4 h-4 mr-2" />
+                  Rename
+                </MenubarItem>
+                <MenubarSeparator />
+                <MenubarLabel>
+                  Flows
+                </MenubarLabel>
+                <MenubarRadioGroup
+                  value={tabId}
+                  onValueChange={(value) => {
+                    setTabId(value);
+                  }}
+                >
+                  {flows.map((flow, idx) => {
+                    return (
+                      <Link to={"/flow/" + flow.id}>
+                  <MenubarRadioItem value={flow.id}>
+                        {emoji} {flow.name}
+                      </MenubarRadioItem>
+                </Link>
+                      
+                    );
+                  })}
+                </MenubarRadioGroup>
+                <MenubarItem
+                  onClick={() => {
+                    handleAddFlow();
+                  }}
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  Add Flow
+                </MenubarItem>
+              </MenubarContent>
+            </MenubarMenu>
+            
+          </Menubar>
+  );
+};
+
+export default MenuBar;

src/frontend/src/components/headerComponent/index.tsx

@@ -1,4 +1,4 @@
-import { SunIcon, MoonIcon, BellIcon } from "lucide-react";
+import { SunIcon, MoonIcon, BellIcon} from "lucide-react";
 import { useContext, useState, useEffect } from "react";
 import { FaGithub } from "react-icons/fa";
 import { Button } from "../ui/button";
@@ -8,7 +8,8 @@ import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
-import MenuBar from "../../pages/MainPage/components/menuBar";
+import MenuBar from "./components/menuBar";
+import { Link } from "react-router-dom";
 
 export default function Header(){
     const {
@@ -35,7 +36,10 @@ export default function Header(){
         }
       }, [addFlow, flows.length, templates]);
     return (
-        <div className="w-full h-16 flex justify-between items-center border-b">
+        <div className="w-full h-14 flex justify-between items-center border-b bg-muted">
+          
+          <div className="flex gap-2 justify-start items-center w-96">
+          <Link to="/"><span className="text-2xl ml-4">⛓️</span></Link>
           {flows.findIndex((f) => tabId === f.id) !== -1 && 
           <MenuBar
             activeTab={activeTab}
@@ -44,10 +48,8 @@ export default function Header(){
             flows={flows}
             tabId={tabId}
           />
-        }
-          <div className="flex">
-            <Button>Explore</Button>
-            <Button>My Flows</Button>
+          }
+
           </div>
           <div className="flex justify-end px-2 w-96">
             <div className="ml-auto mr-2 flex gap-5">

src/frontend/src/pages/MainPage/index.tsx

@@ -22,7 +22,7 @@ import _ from "lodash";
 
 import { updateFlowInDatabase } from "../../controllers/API";
 import { CardComponent } from "./components/cardComponent";
-import { MenuBar } from "./components/menuBar";
+import { MenuBar } from "../../components/headerComponent/components/menuBar";
 export default function HomePage() {
   const {
     flows,