Refactor input styles, implement 3D toggle state management, and enhance FileMenu with dropdown options

app/src/components/ui/FileMenu.tsx

@@ -1,12 +1,24 @@
-import React from "react";
+import React, { useState } from "react";
 import RenameInput from "./inputs/RenameInput";
+import { ArrowIcon } from "../icons/ExportCommonIcons";
+import MenuBar from "./menu/menu";
 
 const FileMenu: React.FC = () => {
+  const [openMenu, setOpenMenu] = useState(false);
   return (
     <div className="project-dropdowm-container">
       <div className="project-name">
         <RenameInput value="untitled" />
       </div>
+      <div
+        className="more-options-button"
+        onClick={() => {
+          setOpenMenu(!openMenu);
+        }}
+      >
+        <ArrowIcon />
+        {openMenu && <MenuBar setOpenMenu={setOpenMenu} />}
+      </div>
     </div>
   );
 };

app/src/components/ui/Tools.tsx

@@ -14,7 +14,7 @@ import {
   ZoneIcon,
 } from "../icons/ExportToolsIcons";
 import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
-import useModuleStore from "../../store/useModuleStore";
+import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
 import { handleSaveTemplate } from "../../modules/visualization/handleSaveTemplate";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
@@ -36,8 +36,8 @@ import useToggleStore from "../../store/useUIToggleStore";
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
   const [activeSubTool, setActiveSubTool] = useState("cursor");
-  const [toggleThreeD, setToggleThreeD] = useState(true);
+  const { toggleThreeD, setToggleThreeD } = useThreeDStore();
-  const { toggleUI, setToggleUI } = useToggleStore();
+  const { setToggleUI } = useToggleStore();
 
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [openDrop, setOpenDrop] = useState(false);
@@ -62,7 +62,11 @@ const Tools: React.FC = () => {
 
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
-    setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
+    setToggleUI(
+      localStorage.getItem("navBarUi")
+        ? localStorage.getItem("navBarUi") === "true"
+        : true
+    );
   }, []);
 
   useEffect(() => {
@@ -80,7 +84,11 @@ const Tools: React.FC = () => {
     } else {
       setToggleView(false);
     }
-    setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
+    setToggleUI(
+      localStorage.getItem("navBarUi")
+        ? localStorage.getItem("navBarUi") === "true"
+        : true
+    );
     setToggleThreeD(!toggleThreeD);
     setActiveSubTool("cursor");
     setActiveTool("cursor");
@@ -202,7 +210,8 @@ const Tools: React.FC = () => {
               <div className="activeDropicon">
                 {activeSubTool == "cursor" && (
                   <div
-                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "cursor" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("cursor");
@@ -213,7 +222,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "free-hand" && (
                   <div
-                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "free-hand" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("free-hand");
@@ -224,7 +234,8 @@ const Tools: React.FC = () => {
                 )}
                 {activeSubTool == "delete" && (
                   <div
-                    className={`tool-button ${activeTool === "delete" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "delete" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("delete");
@@ -297,7 +308,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-wall" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-wall");
@@ -307,7 +319,8 @@ const Tools: React.FC = () => {
                     <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-zone" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-zone");
@@ -317,7 +330,8 @@ const Tools: React.FC = () => {
                     <ZoneIcon isActive={activeTool === "draw-zone"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-aisle" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-aisle");
@@ -327,7 +341,8 @@ const Tools: React.FC = () => {
                     <AsileIcon isActive={activeTool === "draw-aisle"} />
                   </div>
                   <div
-                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "draw-floor" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("draw-floor");
@@ -344,7 +359,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "measure" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "measure" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("measure");
@@ -361,7 +377,8 @@ const Tools: React.FC = () => {
                 <div className="split"></div>
                 <div className="draw-tools">
                   <div
-                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                    className={`tool-button ${
+                      activeTool === "pen" ? "active" : ""
                     }`}
                     onClick={() => {
                       setActiveTool("pen");
@@ -394,7 +411,8 @@ const Tools: React.FC = () => {
             <div className="split"></div>
             <div className="general-options">
               <div
-                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                className={`tool-button ${
+                  activeTool === "comment" ? "active" : ""
                 }`}
                 onClick={() => {
                   setActiveTool("comment");
@@ -404,7 +422,8 @@ const Tools: React.FC = () => {
               </div>
               {toggleThreeD && (
                 <div
-                  className={`tool-button ${activeTool === "play" ? "active" : ""
+                  className={`tool-button ${
+                    activeTool === "play" ? "active" : ""
                   }`}
                   onClick={() => {
                     setIsPlaying(!isPlaying);
@@ -414,19 +433,28 @@ const Tools: React.FC = () => {
                 </div>
               )}
             </div>
+            {activeModule === "builder" && (
+              <>
                 <div className="split"></div>
                 <div
-              className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                  className={`toggle-threed-button${
+                    toggleThreeD ? " toggled" : ""
                   }`}
                   onClick={toggleSwitch}
                 >
-              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                  <div
+                    className={`toggle-option${!toggleThreeD ? " active" : ""}`}
+                  >
                     2d
                   </div>
-              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                  <div
+                    className={`toggle-option${toggleThreeD ? " active" : ""}`}
+                  >
                     3d
                   </div>
                 </div>
+              </>
+            )}
           </div>
         </>
       ) : (

app/src/components/ui/menu/menu.tsx

@@ -1,6 +1,11 @@
 import React, { useState } from "react";
+import { ArrowIcon } from "../../icons/ExportCommonIcons";
 
-const MenuBar = () => {
+interface MenuBarProps {
+  setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
+}
+
+const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
 
@@ -18,7 +23,12 @@ const MenuBar = () => {
   };
 
   return (
-    <div className="menu-bar">
+    <div
+      className="menu-bar"
+      onPointerLeave={() => {
+        setOpenMenu(false);
+      }}
+    >
       {/* Top-level menu buttons */}
       <div className="menu-buttons">
         {/* File Menu */}
@@ -32,7 +42,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             File
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* File Dropdown */}
@@ -44,10 +56,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("New File")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>New File</span>
-                    {selectedItems["New File"] && "✓ "}
-                    New File
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + N</span>
                   </div>
@@ -60,10 +69,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Open Local File")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Open Local File</span>
-                    {selectedItems["Open Local File"] && "✓ "}
-                    Open Local File
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + O</span>
                   </div>
@@ -76,10 +82,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Save Version")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Save Version</span>
-                    {selectedItems["Save Version"] && "✓ "}
-                    Save Version
-                  </span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -90,10 +93,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Make a Copy")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Make a Copy</span>
-                    {selectedItems["Make a Copy"] && "✓ "}
-                    Make a Copy
-                  </span>
                 </div>
               </div>
 
@@ -103,10 +103,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Share")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Share</span>
-                    {selectedItems["Share"] && "✓ "}
-                    Share
-                  </span>
                 </div>
               </div>
 
@@ -116,10 +113,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Rename")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Rename</span>
-                    {selectedItems["Rename"] && "✓ "}
-                    Rename
-                  </span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -130,10 +124,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Import")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Import</span>
-                    {selectedItems["Import"] && "✓ "}
-                    Import
-                  </span>
                 </div>
               </div>
 
@@ -143,10 +134,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Close File")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Close File</span>
-                    {selectedItems["Close File"] && "✓ "}
-                    Close File
-                  </span>
                 </div>
               </div>
             </div>
@@ -164,7 +152,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Edit
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* Edit Dropdown */}
@@ -176,10 +166,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Undo")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Undo</span>
-                    {selectedItems["Undo"] && "✓ "}
-                    Undo
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Z</span>
                   </div>
@@ -192,10 +179,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Redo")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Redo</span>
-                    {selectedItems["Redo"] && "✓ "}
-                    Redo
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Shift + Z</span>
                   </div>
@@ -209,10 +193,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Undo History")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Undo History</span>
-                    {selectedItems["Undo History"] && "✓ "}
-                    Undo History
-                  </span>
                 </div>
               </div>
 
@@ -222,10 +203,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Redo History")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Redo History</span>
-                    {selectedItems["Redo History"] && "✓ "}
-                    Redo History
-                  </span>
                 </div>
                 <div className="split"></div>
               </div>
@@ -236,10 +214,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Find")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Find</span>
-                    {selectedItems["Find"] && "✓ "}
-                    Find
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + F</span>
                   </div>
@@ -252,10 +227,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Delete")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Delete</span>
-                    {selectedItems["Delete"] && "✓ "}
-                    Delete
-                  </span>
                 </div>
               </div>
 
@@ -265,10 +237,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Select by...")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Select by...</span>
-                    {selectedItems["Select by..."] && "✓ "}
-                    Select by...
-                  </span>
                 </div>
               </div>
 
@@ -278,10 +247,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Keymap")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Keymap</span>
-                    {selectedItems["Keymap"] && "✓ "}
-                    Keymap
-                  </span>
                 </div>
               </div>
             </div>
@@ -299,7 +265,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             View
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* View Dropdown */}
@@ -311,10 +279,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Grid")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Grid</span>
-                    {selectedItems["Grid"] && "✓ "}
-                    Grid
-                  </span>
                 </div>
               </div>
 
@@ -325,11 +290,10 @@ const MenuBar = () => {
                 onMouseLeave={() => setActiveSubMenu(null)}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Gizmo</span>
-                    {selectedItems["Gizmo"] && "✓ "}
+                  <span className="dropdown-icon">
-                    Gizmo
+                    <ArrowIcon />
                   </span>
-                  <span className="icon">▾</span>
                 </div>
                 <div className="split"></div>
 
@@ -346,16 +310,14 @@ const MenuBar = () => {
                         Visibility
                       </span>
                     </div>
+                    <div className="split"></div>
 
                     {/* Cube view */}
                     <div
                       className="submenu-item"
                       onClick={() => toggleSelection("Cube view")}
                     >
-                      <span>
+                      <span>Cube view</span>
-                        {selectedItems["Cube view"] && "✓ "}
-                        Cube view
-                      </span>
                     </div>
 
                     {/* Sphere view */}
@@ -363,21 +325,7 @@ const MenuBar = () => {
                       className="submenu-item"
                       onClick={() => toggleSelection("Sphere view")}
                     >
-                      <span>
+                      <span>Sphere view</span>
-                        {selectedItems["Sphere view"] && "✓ "}
-                        Sphere view
-                      </span>
-                    </div>
-
-                    {/* Custom settings */}
-                    <div
-                      className="submenu-item"
-                      onClick={() => toggleSelection("Custom settings")}
-                    >
-                      <span>
-                        {selectedItems["Custom settings"] && "✓ "}
-                        Custom settings
-                      </span>
                     </div>
                   </div>
                 )}
@@ -389,10 +337,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Zoom")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Zoom</span>
-                    {selectedItems["Zoom"] && "✓ "}
-                    Zoom
-                  </span>
                 </div>
               </div>
 
@@ -402,10 +347,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Full Screen")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Full Screen</span>
-                    {selectedItems["Full Screen"] && "✓ "}
-                    Full Screen
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">F11</span>
                   </div>
@@ -424,11 +366,7 @@ const MenuBar = () => {
             setActiveSubMenu(null);
           }}
         >
-          <div className="menu-button">
+          <div className="menu-button">Version history</div>
-            Version history
-          </div>
-
-   
         </div>
 
         {/* Export As Menu */}
@@ -440,14 +378,11 @@ const MenuBar = () => {
             setActiveSubMenu(null);
           }}
         >
-          <div className="menu-button">
+          <div className="menu-button">Export as...</div>
-            Export as...
-          </div>
-
         </div>
 
         {/* Apps Menu */}
-        <div
+        {/* <div
           className="menu-button-container"
           onMouseEnter={() => setActiveMenu("Apps")}
           onMouseLeave={() => {
@@ -457,68 +392,64 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Apps
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
-          {/* Apps Dropdown */}
           {activeMenu === "Apps" && (
             <div className="dropdown-menu">
-              {/* New App */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("New App")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["New App"] && "✓ "}
+                    
                     New App
                   </span>
                 </div>
                 <div className="split"></div>
-
               </div>
 
-              {/* Work-flow Monitor */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("Work-flow Monitor")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["Work-flow Monitor"] && "✓ "}
+                    
                     Work-flow Monitor
                   </span>
                 </div>
               </div>
 
-              {/* Temperature Visualizer */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("Temperature Visualizer")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["Temperature Visualizer"] && "✓ "}
+                    
                     Temperature Visualizer
                   </span>
                 </div>
               </div>
 
-              {/* View all */}
               <div
                 className="menu-item-container"
                 onClick={() => toggleSelection("View all")}
               >
                 <div className="menu-item">
                   <span>
-                    {selectedItems["View all"] && "✓ "}
+                    
                     View all
                   </span>
                 </div>
               </div>
             </div>
           )}
-        </div>
+        </div> */}
 
         {/* Help Menu */}
         <div
@@ -531,7 +462,9 @@ const MenuBar = () => {
         >
           <div className="menu-button">
             Help
-            <span className="dropdown-icon">▾</span>
+            <span className="dropdown-icon">
+              <ArrowIcon />
+            </span>
           </div>
 
           {/* Help Dropdown */}
@@ -543,10 +476,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Shortcuts")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Shortcuts</span>
-                    {selectedItems["Shortcuts"] && "✓ "}
-                    Shortcuts
-                  </span>
                   <div className="menu-item-right">
                     <span className="shortcut">Ctrl + Shift + ?</span>
                   </div>
@@ -559,10 +489,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Manual")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Manual</span>
-                    {selectedItems["Manual"] && "✓ "}
-                    Manual
-                  </span>
                 </div>
               </div>
 
@@ -572,10 +499,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Video Tutorials")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Video Tutorials</span>
-                    {selectedItems["Video Tutorials"] && "✓ "}
-                    Video Tutorials
-                  </span>
                 </div>
               </div>
 
@@ -585,10 +509,7 @@ const MenuBar = () => {
                 onClick={() => toggleSelection("Report a bug")}
               >
                 <div className="menu-item">
-                  <span>
+                  <span>Report a bug</span>
-                    {selectedItems["Report a bug"] && "✓ "}
-                    Report a bug
-                  </span>
                 </div>
               </div>
             </div>
@@ -600,5 +521,3 @@ const MenuBar = () => {
 };
 
 export default MenuBar;
-
-

app/src/pages/Project.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import ModuleToggle from "../components/ui/ModuleToggle";
 import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
 import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
-import useModuleStore from "../store/useModuleStore";
+import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
 import RealTimeVisulization from "../components/ui/componets/RealTimeVisulization";
 import Tools from "../components/ui/Tools";
 // import Scene from "../modules/scene/scene";
@@ -49,14 +49,14 @@ const Project: React.FC = () => {
     }
   }, []);
   const { isPlaying } = usePlayButtonStore();
+  const { toggleThreeD } = useThreeDStore();
 
   return (
     <div className="project-main">
       {loadingProgress && <LoadingPage progress={loadingProgress} />}
       {!isPlaying && (
         <>
-          <ModuleToggle />
+          {toggleThreeD && <ModuleToggle />}
-          <ModuleToggle />
           <SideBarLeft />
           <SideBarRight />
         </>

app/src/store/useModuleStore.ts

@@ -24,3 +24,16 @@ const useSubModuleStore = create<SubModuleStore>((set) => ({
 }));
 
 export { useSubModuleStore };
+
+interface ThreeDState {
+  toggleThreeD: boolean;
+  setToggleThreeD: (value: boolean) => void;
+}
+
+// Create the Zustand store
+const useThreeDStore = create<ThreeDState>((set) => ({
+  toggleThreeD: true, // Initial state
+  setToggleThreeD: (value) => set({ toggleThreeD: value }), // Action to update the state
+}));
+
+export { useThreeDStore };

app/src/styles/components/input.scss

@@ -155,16 +155,6 @@
   }
 }
 
-.project-dropdowm-container {
-  position: relative;
-  height: 32px;
-
-  .project-name {
-    line-height: 32px;
-    height: 100%;
-  }
-}
-
 .regularDropdown-container {
   width: 100%;
   min-width: 80px;

app/src/styles/components/menu/menu.scss

@@ -1,25 +1,58 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
+.project-dropdowm-container {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  position: relative;
+  height: 32px;
+  .project-name {
+    line-height: 32px;
+    height: 100%;
+  }
+  .more-options-button {
+    @include flex-center;
+    border-radius: #{$border-radius-small};
+    height: 28px;
+    position: relative;
+    &:hover {
+      background: var(--highlight-accent-color);
+      path {
+        fill: var(--accent-color);
+      }
+    }
+  }
+  .more-options-button.active {
+    background: var(--highlight-accent-color);
+    path {
+      fill: var(--accent-color);
+    }
+  }
+}
+
 .menu-bar {
   position: absolute;
-  top: 50%;
+  top: 32px;
-  left: 50%;
+  left: 0;
-  transform: translate(-50%, -50%);
   z-index: 5;
   background-color: var(--background-color);
   color: var(--text-color);
   box-shadow: var(--box-shadow-light);
   border-radius: 8px;
+  border: 1px solid var(--border-color);
   .menu-buttons {
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 8px 4px;
+    padding: 4px;
     min-width: 178px;
 
     .menu-button-container {
       position: relative;
       height: 100%;
-      padding: 8px;
+      padding: 4px 8px 4px 12px;
-
+      border-radius: #{$border-radius-small};
       .menu-button {
         width: 100%;
         cursor: pointer;
@@ -32,7 +65,7 @@
         .dropdown-icon {
           margin-left: 5px;
           font-size: var(--font-size-small);
-          color: #666666;
+          rotate: -90deg;
         }
       }
 
@@ -46,20 +79,21 @@
         box-shadow: var(--box-shadow-light);
         border: 1px solid var(--background-color);
         z-index: 100;
-        padding: 5px 0;
+        padding: 4px;
-
         .menu-item-container {
           position: relative;
-
           .menu-item {
+            padding: 4px 8px 4px 12px;
+            border-radius: #{$border-radius-small};
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 8px 20px;
             cursor: pointer;
             white-space: nowrap;
             color: var(--text-color);
-
+            .dropdown-icon {
+              rotate: -90deg;
+            }
             &:hover {
               background-color: var(--highlight-accent-color);
               color: var(--highlight-accent-color);
@@ -92,19 +126,20 @@
             box-shadow: var(--box-shadow-light);
             border: 1px solid var(--background-color);
             z-index: 101;
-
+            padding: 4px;
             .submenu-item {
-              padding: 8px 20px;
+              padding: 4px 8px 4px 12px;
-              cursor: pointer;
+              border-radius: #{$border-radius-small};
               display: flex;
               justify-content: space-between;
+              align-items: center;
+              cursor: pointer;
+              white-space: nowrap;
               color: var(--text-color);
-
               &:hover {
-                background-color: var(--background-color-gray);
+                background-color: var(--highlight-accent-color);
                 color: var(--highlight-accent-color);
               }
-
               .shortcut {
                 color: var(--text-color);
               }
@@ -122,6 +157,7 @@
   .split {
     width: 100%;
     height: 1px;
-    background-color: #e0dfff;
+    background-color: var(--highlight-accent-color);
+    margin: 2px 0;
   }
 }