src/Components/FloatingButton/FloatingButton.tsx

@@ -1,10 +1,38 @@
 import * as React from 'react';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
 
 interface IFloatingButtonProps {
+  children: React.ReactNode[] | React.ReactNode
+  className: string
 }
 
+const toggleState = (
+  isHidden: boolean,
+  setHidden: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  setHidden(!isHidden);
+};
+
 const FloatingButton: React.FC<IFloatingButtonProps> = (props: IFloatingButtonProps) => {
-  return <></>;
+  const [isHidden, setHidden] = React.useState(true);
+  const buttonListClasses = isHidden ? 'opacity-0' : 'opacity-100';
+  const icon = isHidden
+    ? <MenuIcon className="floating-btn" />
+    : <XIcon className="floating-btn" />;
+
+  return (
+    <div className={props.className}>
+      <div className={`transition-all ${buttonListClasses}`}>
+        { props.children }
+      </div>
+      <button
+        className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
+        title='Open menu'
+        onClick={() => toggleState(isHidden, setHidden)}
+      >
+        { icon }
+      </button>
+    </div>);
 };
 
 export default FloatingButton;

src/Editor.tsx

@@ -9,6 +9,7 @@ import { History } from './Components/History/History';
 import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Interfaces/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
+import FloatingButton from './Components/FloatingButton/FloatingButton';
 
 interface IEditorProps {
   configuration: Configuration,
@@ -334,13 +335,16 @@ class Editor extends React.Component<IEditorProps> {
         >
           { current.MainContainer }
         </SVG>
-        <button
+        <FloatingButton className={`fixed flex flex-col gap-2 items-center bottom-40 ${buttonRightOffsetClasses}`}>
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-40 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
+          <button
-          title='Export as JSON'
+            className={'transition-all w-10 h-10 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
-          onClick={() => this.SaveEditor()}
+            title='Export as JSON'
-        >
+            onClick={() => this.SaveEditor()}
-          <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          >
-        </button>
+            <UploadIcon className="h-full w-full text-white align-middle items-center justify-center" />
+          </button>
+        </FloatingButton>
+
       </div>
     );
   }

src/index.scss

@@ -10,9 +10,12 @@
     @apply pl-6 pr-6 pt-2 pb-2 w-full
   }
   .close-button {
-    @apply transition-all w-full h-auto p-4 flex 
+    @apply transition-all w-full h-auto p-4 flex
   }
   .mainmenu-btn {
     @apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8  rounded-lg
   }
+  .floating-btn {
+    @apply h-full w-full text-white align-middle items-center justify-center
+  }
 }