Create new fruit feature

src/components/Header.vue

@@ -4,6 +4,8 @@
       <img src="https://www.cycloid.io/themes/cycloid/images/owl_logo.png" alt="Cycloid.io" />
       <h1>Fruits</h1>
     </router-link>
+
+    <button class="action-btn" @click="() => $store.commit('toggleModal')">+</button>
   </header>
 </template>
 
@@ -18,10 +20,6 @@ header {
   background-color: @color-2;
   box-shadow: 0 0px 14px 0px #cecece;
 
-  > a {
-    padding: 0.5rem;
-  }
-
   h1 {
     margin: 0;
     font-size: 28px;
@@ -33,20 +31,35 @@ header {
     top: 0;
     left: 0;
     right: 0;
-    transition: all 0.3s ease-in-out;
-    width: 100%;
-    height: @headerHeight;
     z-index: 15;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    height: @headerHeight;
+    transition: all 0.3s ease-in-out;
 
     a {
       display: flex;
       align-items: center;
+
+      img {
+        width: 35px;
+        height: 35px;
+        margin-right: 1rem;
+      }
     }
 
-    img {
-      width: 35px;
-      height: 35px;
-      margin-right: 1rem;
+    .action-btn {
+      width: 42px;
+      height: 42px;
+      border: none;
+      border-radius: 50%;
+      background-color: @color-1;
+      color: @color-2;
+      font-size: 28px;
+      font-weight: lighter;
+      text-align: center;
     }
   }
 }