added wrapper and navbar

app/scss/Default.scss

@@ -1,9 +0,0 @@
-.Default {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    font-size: 5em;
-}

app/scss/Home.scss

@@ -1,5 +0,0 @@
-.Home {
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
-}

app/scss/Navbar.scss

@@ -1,34 +0,0 @@
-.Navbar {
-    position: fixed;
-    top: 0px;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: $navbarHeight;
-    background-color: darken(white, 5%);
-    border-bottom: 1px solid darken(white, 10%);
-    
-    .active {
-        background-color: darken(white, 2%);
-    }
-}
-
-.Navbar__item {
-    align-self: stretch;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100px;
-    background-color: white;
-    color: gray;
-    cursor: pointer;
-    text-decoration: none;
-    
-    &:hover {
-        background-color: darken(white, 2%);
-    }
-
-    & + .Navbar__item {
-        border-left: 1px solid darken(white, 5%);
-    }
-}

app/scss/index.scss

@@ -1,8 +1,3 @@
 @import '../assets/normalize.css';
 @import './variables.scss';
-
-// import all css files
 @import './style.scss';
-@import './Navbar.scss';
-@import './Default.scss';
-@import './Home.scss';

app/scss/style.scss

@@ -1,3 +1,11 @@
 body {
-    padding-top: $navbarHeight;
+    background-color: $gray1;
+    color: $white;
+    padding-left: $navbarWidth;
 }
+
+.content {
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+}

app/scss/variables.scss

@@ -1 +1,13 @@
-$navbarHeight: 50px;
+$navbarWidth: 200px;
+
+
+// colors
+$primaryBlue: #42adf4;
+$white: darken(white, 10%);
+
+$gray1: #686a6e;
+$gray2: #424549;
+$gray3: #36393e;
+$gray4: #2e3136;
+$gray5: #282b30;
+$gray6: #1e2124;