Add header

Author: congmul

src/App.tsx

@@ -5,6 +5,7 @@ import Editor from './components/Editor/Editor';
 import ReactSplitPane from './components/SplitPane/SplitPane';
 import SwaggerUI from 'swagger-ui-react';
 import petStoreAPISpec from './assets/petstore.apispec.json';
+import Header from './components/Header/Header';
 import Footer from './components/Footer/Footer';
 
 
@@ -29,6 +30,7 @@ function App() {
   }, [leftMenuCollapse])
   return (
     <>
+      <Header />
       <div className="app-wrapper">
         <LeftMenu setContent={setContent} leftMenuCollapse={leftMenuCollapse} setLeftMenuCollapse={setLeftMenuCollapse} />
         <div className="editor-page-wrapper" ref={rightMenuRef}>

src/components/Header/Header.tsx

@@ -0,0 +1,11 @@
+const Header:React.FC = ({}) => {
+    return(
+        <header>
+            <div className="header-wrapper">
+                <div>OpenAPI Specification editor</div>
+            </div>
+        </header>
+    )
+}
+
+export default Header;

src/sass/components/_header.scss

@@ -0,0 +1,9 @@
+header{
+    height: 100%;
+    padding: 15px;
+    border-bottom: 1px solid #d2d2d2;
+    .header-wrapper{
+        display: flex;
+        align-items: center;
+    }
+}

src/sass/components/_leftMenu.scss

@@ -1,5 +1,5 @@
 .left-menu{
-    height: 100vh;
+    height: calc(100vh - 110px);
     width: 350px;
     border-right: 1px dotted var(--color-background-border);
     display: flex;

src/sass/index.scss

@@ -9,11 +9,12 @@
 @import "./components/readfile";
 @import "./components/splitPane";
 @import "./components/editor/editor";
+@import "./components/header";
 @import "./components/footer";
 
 .app-wrapper{
     display: flex;
-    height: calc(100vh - 55px);
+    height: calc(100vh - 110px);
     .editor-page-wrapper{
         position:relative;
         width: calc(100vw - 350px);