built base grid

src/components/headerBar.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function HeaderBar() {
+    return (
+        <div className='bar'></div>
+    )
+}

src/components/headerWrapper.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react';
+import HeaderBar from './headerBar';
 
 class HeaderWrapper extends Component {
     render() {
-        return (
+        return [
             <div className='header-wrapper'>
                 <h1 className='header-wrapper__title'>Welcome to HOA Manager!</h1>
                 <p className='header-wrapper__subtitle'>Please login to continue</p>
-                {this.props.children}
-            </div>
-        )
+
+            </div>,
+            HeaderBar(),
+            this.props.children
+        ]
     }
 }
 

src/style/base.scss

@@ -15,4 +15,20 @@ body {
     font-family: $font-encode;
     font-weight: 400;
     color: $color-gray-4D;
+}
+
+.app-wrapper {
+    width: 100vw;
+    height: 100vh;
+
+    display: grid;
+    grid-template-rows: [page-s header-s] 13.6rem [header-e bar-s] 4rem [bar-e content-s] 1fr [content-e page-e];
+    grid-template-columns: [page-s] 14rem [content-s] 1fr [content-e] 14rem [page-e]
+}
+
+.bar {
+    height: 4rem;
+    background-color: $color-gray-D8;
+    grid-row: bar-s/bar-e;
+    grid-column: page-s/page-e;
 }

src/style/header-wrapper.scss

@@ -1,4 +1,7 @@
 .header-wrapper {
+    grid-row: header-s/header-e;
+    grid-column: content-s/content-e;
+
     display: grid;
     grid-template-columns: [s] 1fr [e];
     grid-template-rows: [title-s] 3rem [title-e sub-s] 2rem [sub-e];
@@ -14,7 +17,6 @@
 }
 
 .header-wrapper {
-
     padding-top: 4rem;
 
     &__title {