change location of dropdown menu

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -292,28 +292,7 @@ export function Workspace () {
     )
   }
 
-  return (
-    <div className='remixui_container'>
-      <div className='d-flex flex-column w-100 remixui_fileexplorer' data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
-        <div>
-          <header>
-            <div className="mx-2 mb-2">
-              <label className="pl-1 form-check-label" htmlFor="workspacesSelect">
-                Workspaces
-              </label>
-              <span className="remixui_menu">
-                <span
-                  hidden={currentWorkspace === LOCALHOST}
-                  id='workspaceCreate'
-                  data-id='workspaceCreate'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    createWorkspace()
-                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
-                  }}
-                  className='far fa-plus-square remixui_menuicon'
-                  title='Create'>
-                </span>
+  const workspaceMenuIcons = [
     <span
       hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
       id='workspaceRename'
@@ -325,7 +304,7 @@ export function Workspace () {
       }}
       className='far fa-edit remixui_menuicon'
       title='Rename'>
-                </span>
+    </span>,
     <span
       hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
       id='workspaceDelete'
@@ -337,7 +316,7 @@ export function Workspace () {
       }}
       className='far fa-trash remixui_menuicon'
       title='Delete'>
-                </span>
+    </span>,
     <span
       hidden={currentWorkspace === LOCALHOST || currentWorkspace === NO_WORKSPACE}
       id='workspacesDownload'
@@ -349,7 +328,7 @@ export function Workspace () {
       }}
       className='far fa-download remixui_menuicon'
       title='Download Workspaces'>
-                </span>
+    </span>,
     <span
       hidden={currentWorkspace === LOCALHOST}
       id='workspacesRestore'
@@ -361,7 +340,7 @@ export function Workspace () {
       }}
       className='far fa-upload remixui_menuicon'
       title='Restore Workspaces Backup'>
-                </span>
+    </span>,
     <span
       hidden={currentWorkspace === LOCALHOST}
       id='cloneGitRepository'
@@ -374,7 +353,33 @@ export function Workspace () {
       className='far fa-clone remixui_menuicon'
       title='Clone Git Repository'>
     </span>
+  ]
+
+  return (
+    <div className='remixui_container'>
+      <div className='d-flex flex-column w-100 remixui_fileexplorer' data-id="remixUIWorkspaceExplorer" onClick={resetFocus}>
+        <div>
+          <header>
+            <div className="mx-2 mb-2 d-flex justify-content-between">
+              <label className="pl-1 form-check-label" htmlFor="workspacesSelect">
+                Workspaces
+              </label>
+              <span className="remixui_menu">
+                <span
+                  hidden={currentWorkspace === LOCALHOST}
+                  id='workspaceCreate'
+                  data-id='workspaceCreate'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    createWorkspace()
+                    _paq.push(['trackEvent', 'fileExplorer', 'workspaceMenu', 'workspaceCreate'])
+                  }}
+                  className='far fa-plus-square remixui_menuicon'
+                  title='Create'>
+                </span>
+                <span className="fas fa-bars remixui_menuicon"></span>
               </span>
+
               <Dropdown id="workspacesSelect" data-id="workspacesSelect" onToggle={toggleDropdown} show={showDropdown}>
                 <Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" className="btn btn-light btn-block w-100 d-inline-block border border-dark form-control" icon={selectedWorkspace && selectedWorkspace.isGitRepo && !(currentWorkspace === LOCALHOST) ? 'far fa-code-branch' : null}>
                   { selectedWorkspace ? selectedWorkspace.name : currentWorkspace === LOCALHOST ? 'localhost' : NO_WORKSPACE }
@@ -414,6 +419,15 @@ export function Workspace () {
                 </Dropdown.Menu>
               </Dropdown>
             </div>
+            <Dropdown className="custom-dropdown-items">
+                {
+                  workspaceMenuIcons.map(m => (
+                    <Dropdown.Item>
+                      {m}
+                    </Dropdown.Item>
+                  ))
+                }
+              </Dropdown>
           </header>
         </div>
         <div className='h-100 remixui_fileExplorerTree' onFocus={() => { toggleDropdown(false) }}>