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 />
+        <Header />
-            <Router />
+        <Router />
       </ErrorBoundary>
       <div></div>
       <div

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

@@ -10,9 +10,11 @@ import {
   MenubarTrigger,
   MenubarRadioGroup,
   MenubarRadioItem,
-} from "../../../../components/ui/menubar";
+  MenubarLabel,
+  MenubarSeparator,
+} from "../../../ui/menubar";
 
-import RenameLabel from "../../../../components/ui/rename-label";
+import RenameLabel from "../../../ui/rename-label";
 import _ from "lodash";
 import ImportModal from "../../../../modals/importModal";
 import ExportModal from "../../../../modals/exportModal";
@@ -50,20 +52,10 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
   let color = current_flow.style?.color || "bg-blue-200";
 
   return (
-    <div className="flex gap-2 justify-start items-center w-96">
+          <Menubar>
-      <span className="text-2xl ml-4">⛓️</span>
+            <MenubarMenu>
-      {activeTab === "myflow" && (
+              <MenubarTrigger className="px-1">
-        <div className="flex gap-2 p-2">
+              <RenameLabel
-          <div className="flex gap-2 items-center">
-            <span
-              className={
-                "rounded-md w-10 h-10 flex items-center justify-center text-2xl " +
-                color
-              }
-            >
-              {emoji}
-            </span>
-            <RenameLabel
               value={current_flow.name}
               setValue={(value) => {
                 if (value !== "") {
@@ -75,11 +67,12 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
               rename={rename}
               setRename={setRename}
             />
-          </div>
+            
-          <Menubar>
+              </MenubarTrigger>
-            <MenubarMenu>
-              <MenubarTrigger className="px-2">File</MenubarTrigger>
               <MenubarContent>
+                <MenubarLabel>
+                  File
+                </MenubarLabel>
                 <MenubarItem
                   onClick={() => {
                     openPopUp(<ImportModal />);
@@ -104,11 +97,10 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
                   <Code className="w-4 h-4 mr-2" />
                   Code
                 </MenubarItem>
-              </MenubarContent>
+                <MenubarSeparator />
-            </MenubarMenu>
+                <MenubarLabel>
-            <MenubarMenu>
+                  Edit
-              <MenubarTrigger>Edit</MenubarTrigger>
+                </MenubarLabel>
-              <MenubarContent>
                 <MenubarItem
                   onClick={() => {
                     handleSaveFlow(current_flow);
@@ -125,12 +117,10 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
                   <Edit className="w-4 h-4 mr-2" />
                   Rename
                 </MenubarItem>
-              </MenubarContent>
+                <MenubarSeparator />
-            </MenubarMenu>
+                <MenubarLabel>
-            <MenubarMenu>
+                  Flows
-              <MenubarTrigger>Flows</MenubarTrigger>
+                </MenubarLabel>
-              <MenubarContent>
-                
                 <MenubarRadioGroup
                   value={tabId}
                   onValueChange={(value) => {
@@ -158,10 +148,8 @@ export const MenuBar = ({ activeTab, setRename, rename, flows, tabId }) => {
                 </MenubarItem>
               </MenubarContent>
             </MenubarMenu>
+            
           </Menubar>
-        </div>
-      )}
-    </div>
   );
 };
 

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,