style editor page

src/pages/editor/index.tsx

@@ -1,41 +1,49 @@
 import React from "react";
+import { Sidebar } from "src/components/Sidebar";
 import styled from "styled-components";
-import JsonEditor from "./JsonEditor";
-import LiveEditor from "./LiveEditor";
+import { JsonEditor } from "./JsonEditor";
+import { LiveEditor } from "./LiveEditor";
+
+const StyledPageWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`;
 
 const StyledEditorWrapper = styled.div`
-  height: 75vh;
+  width: 100%;
 `;
 
 const StyledTools = styled.div`
-  height: 60px;
-  border-radius: 5px 5px 0 0;
+  display: flex;
+  align-items: center;
+  height: 36px;
   border: 1px solid ${({ theme }) => theme.BLACK};
-  padding: 8px 16px 0;
+  padding: 4px 16px;
   background: ${({ theme }) => theme.BLACK_SECONDARY};
+  color: ${({ theme }) => theme.SILVER};
 `;
 
 const StyledEditor = styled.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0 0 5px 5px;
-  height: 100%;
   background: ${({ theme }) => theme.BLACK_LIGHT};
   border: 1px solid ${({ theme }) => theme.BLACK};
   border-top: none;
-  overflow: hidden;
+  height: calc(100vh - 48px);
 `;
 
+
 const Editor: React.FC = () => {
   return (
-    <StyledEditorWrapper>
-      <StyledTools>tools</StyledTools>
-      <StyledEditor>
-        <JsonEditor />
-        <LiveEditor />
-      </StyledEditor>
-    </StyledEditorWrapper>
+    <StyledPageWrapper>
+      <Sidebar />
+      <StyledEditorWrapper>
+        <StyledTools>Tools</StyledTools>
+        <StyledEditor>
+          <JsonEditor />
+          <LiveEditor />
+        </StyledEditor>
+      </StyledEditorWrapper>
+    </StyledPageWrapper>
   );
 };