Merge pull request #1 from kulapio/improve-ui

Improve UI

src/App.vue

@@ -1,26 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link>
+    <div class="left">
+      <Sidebar/>
+    </div>
+    <div class="right">
+      <router-view/>
     </div>
-    <router-link to="/">
-    <img src="@/assets/img/logo/kulap-bakery-logo.jpg"
-        srcset="@/assets/img/logo/[email protected] 2x,
-                @/assets/img/logo/[email protected] 3x"
-        class="kulap-bakery-logo">
-    </router-link>
-    <router-view/>
-    <Footer/>
   </div>
 </template>
 
 <script>
-import Footer from '@/components/Footer'
+import Sidebar from '@/components/Sidebar'
 
 export default {
   name: 'App',
   components: {
-    Footer
+    Sidebar
   }
 }
 </script>
@@ -30,27 +25,22 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
+  max-height: 100vh;
 }
-#nav {
-  padding: 30px;
-}
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-.header-image {
-  height: 70px;
-  cursor: pointer;
+.left {
+  float: left;
+  width: 226px;
 }
-.kulap-bakery-logo {
-  width: 279px;
-  height: 157px;
-  object-fit: contain;
-  margin-bottom: 20px;
+.right {
+  float: left;
+  width: calc(100vw - 226px);
+  height: 100vh;
+  padding: 1.5rem;
+  overflow: auto;
+  background-image: url("/bg.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
 }
 </style>