SA

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

2018/simple-vue-nuxt-app/components/Book.vue

@@ -1,37 +1,46 @@
 <template>
-    <nuxt-link :to="'/books/' + id">
-        <div class="single-book">
+
+    <div class="single-book">
+        <div class="choose-favourite"></div>
+        <nuxt-link :to="'/books/' + id">
             <h2>{{title}}</h2>
             <p>{{author}}</p>
             <p>{{description}}</p>
             <div class="book-img" :style="{backgroundImage: 'url('+ img +')'}"></div>
-        </div>
-    </nuxt-link>
+       </nuxt-link>
+    </div>
+
 </template>
 
 <script>
 export default {
-  props: ['title', 'author', 'description', 'img', 'id']
-}
+  props: ["title", "author", "description", "img", "id"]
+};
 </script>
 
 <style scoped>
-.single-book{
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    text-align: center;
-    padding: 10px;
-
-    box-sizing: border-box;
-    width: 280px;
-    border: 1px solid #ccc;
-    margin: 10px;
-} 
-.book-img{
-    background-position: center;
-    background-size: cover;
-    width: 100%;
-    height: 200px;
+.single-book {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+  width: 280px;
+  border: 1px solid #ccc;
+  margin: 10px;
+}
+.book-img {
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 200px;
+}
+.choose-favourite {
+  background-image: url("https://png.icons8.com/metro/1600/like.png");
+  height: 20px;
+  width: 20px;
+  background-size: 100%;
+  float: right;
 }
 </style>

2018/simple-vue-nuxt-app/components/page-navigation.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="wrapper">
+    <nuxt-link :to="'/' ">
+      <div class="main-page">HOME</div>
+    </nuxt-link>
+
+
+  <nuxt-link :to="'/books' ">
+      <div class="all-books">BOOKS</div>
+    </nuxt-link>
+
+  <nuxt-link :to="'/' ">
+    <div class="favourites">FAVOURITES</div>
+  </nuxt-link>
+  </div >
+</template >
+
+  <script>
+</script>
+
+  <style>
+.wrapper {
+  display: grid;
+  grid-template-columns: 35% 35% 30%;
+  height: 50px;
+  background: grey;
+  text-align: center;
+}
+</style>

2018/simple-vue-nuxt-app/layouts/default.vue

@@ -1,7 +1,24 @@
 <template>
   <div>
-
-    <nuxt/>    
+    <pagenavigation></pagenavigation>
+    <nuxt/>
   </div>
 </template>
 
+<script>
+import pagenavigation from "@/components/page-navigation.vue";
+
+export default {
+  components: {
+    pagenavigation: pagenavigation
+
+  }
+};
+</script>
+
+<style>
+
+
+
+
+</style>

2018/simple-vue-nuxt-app/pages/books/index.vue

@@ -1,9 +1,10 @@
 <template>
 <div>
       <h1>Książki</h1>
+<input type="text" v-model="search" placeholder="search books">
   <div class="books-container">
         <Book
-            v-for="book in books"
+            v-for="book in booksFiltered"
             :key="book.id"
             :img="book.img"
             :title="book.title"
@@ -27,6 +28,18 @@ import Book from '@/components/Book';
 export default {
   components: {
       Book
+  },
+    data () {
+      return {
+          search:""
+      }
+  },
+  computed: {
+     booksFiltered: function() {
+         return this.books.filter((book)=>{
+             return book.title.match(this.search)
+         })
+     } 
   },
   asyncData(){
       return new Promise((resolve, reject) => {