side and top menu

wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js

 import React from "react";
+import styled from "styled-components";
+
 import { forEach, map } from "lodash";
 import MainMenuBarItems from "./MainMenuBarItems";
 
+const MainMenuContainer = styled.div`
+  background: #fff;
+  height: 52px;
+  line-height: 32px;
+  position: relative;
+  user-select: none;
+`;
+const MainMenuInner = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: transparent;
+  z-index: 9999;
+`;
+const MainMenu = styled.div`
+  background: #fff;
+  padding: 2px 2px 2px 0;
+  position: relative;
+  background: transparent;
+`;
+
 const filtered = (menu, menuItems) =>
   Object.keys(menu)
     .filter(key => menuItems.includes(key))
@@ -27,9 +55,9 @@ const MainMenuBar = ({
   className,
   fileUpload
 }) => (
-  <div>
-    <div>
-      <div>
+  <MainMenuContainer>
+    <MainMenuInner>
+      <MainMenu>
         {
           <span>
             {map(setMenuItems(MainMenuBarItems, menuItems), item =>
@@ -37,9 +65,9 @@ const MainMenuBar = ({
             )}
           </span>
         }
-      </div>
-    </div>
-  </div>
+      </MainMenu>
+    </MainMenuInner>
+  </MainMenuContainer>
 );
 
 export default MainMenuBar;

wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js

 import React from "react";
+import styled from "styled-components";
 import { forEach, map } from "lodash";
 import SideMenuItems from "./SideMenuItems";
 
+const SideMenuContainer = styled.div`
+  display: flex;
+  width: 12%;
+  height: 98%;
+`;
+
+const SideMenuInner = styled.div`
+  display: flex;
+  width: 100%;
+`;
+
+const SideMenu = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: 15px;
+  button {
+    display: flex;
+    margin-left: 5%;
+    flex-direction: column;
+    width: 90%;
+    background: transparent;
+  }
+`;
+
 const filtered = (menu, menuItems) =>
   Object.keys(menu)
     .filter(key => menuItems.includes(key))
@@ -27,9 +54,9 @@ const SideMenuBar = ({
   className,
   fileUpload
 }) => (
-  <div>
-    <div>
-      <div>
+  <SideMenuContainer>
+    <SideMenuInner>
+      <SideMenu>
         {
           <span>
             {map(setMenuItems(SideMenuItems, menuItems), item =>
@@ -37,9 +64,9 @@ const SideMenuBar = ({
             )}
           </span>
         }
-      </div>
-    </div>
-  </div>
+      </SideMenu>
+    </SideMenuInner>
+  </SideMenuContainer>
 );
 
 export default SideMenuBar;

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

@@ -2,6 +2,12 @@ import styled from "styled-components";
 import React, { Fragment } from "react";
 import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
 
+const LayoutWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
 const WaxSurfaceContainer = styled.div`
   flex: 1;
   position: relative;
@@ -9,13 +15,13 @@ const WaxSurfaceContainer = styled.div`
 `;
 
 const EditoriaLayout = ({ editor, view, ...props }) => (
-  <Fragment>
+  <LayoutWrapper>
     <MainMenuBar view={view} {...props} />
     <WaxSurfaceContainer>
       <SideMenuBar view={view} {...props} />
       {editor}
     </WaxSurfaceContainer>
-  </Fragment>
+  </LayoutWrapper>
 );
 
 export default EditoriaLayout;