Add a main header

src/App.vue

@@ -1,16 +1,21 @@
 <template>
   <div id="app">
+    <Header/>
     <Sidebar/>
-    <router-view/>
+    <div id="page">
+      <router-view/>
+    </div>
   </div>
 </template>
 
 <script>
+import Header from '@/components/Header.vue'
 import Sidebar from '@/components/Sidebar.vue'
 
 export default {
   name: 'App',
   components: {
+    Header,
     Sidebar
   }
 }
@@ -24,4 +29,10 @@ export default {
   text-align: center;
   color: #2c3e50;
 }
+#page {
+  margin: calc(60px + 10px) 5% 20px calc(10vw + 5%);
+}
+body {
+  margin: 0;
+}
 </style>

src/components/Header.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="header">
+    <span class="lead">StoryBoard</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header'
+}
+</script>
+
+<style lang="scss">
+#header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 60px;
+  background-color: #c43422;
+  color: #f7f6f4;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  padding: 0 15px;
+  z-index: 2000;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.lead {
+  font-size: 1.5em;
+  padding: 0 20px;
+}
+</style>

src/components/Sidebar.vue

@@ -19,11 +19,12 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 #nav {
-  padding: 0px;
+  padding: 10px 0px;
   position: fixed;
   top: 60px;
   left: 0;
   height: calc(100vh - 60px);
+  width: 10vw;
   background-color: #333;
   box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.5);