Create Header component + Add styles

2020-12-04 16:45:59 +01:00
parent 55220b6cca
commit ae7f8dd77e
2 changed files with 77 additions and 4 deletions
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -0,0 +1,35 @@
+<template>
+  <nav class="main-nav">
+    <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
+    <h1>Fruits</h1>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: "Header"
+};
+</script>
+
+<style lang="less">
+nav {
+  display: flex;
+  align-items: center;
+  background-color: @secondary-color;
+  padding: 0.5rem;
+  box-shadow: 0 19px 34px -15px #d2d2f2;
+
+  &.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(58px - 0.5rem * 2);
+    img {
+      width: 35px;
+      height: 35px;
+      margin-right: 1rem;
+    }
+  }
+}
+</style>