For test

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.18.0",
     "material-design-icons-iconfont": "^3.0.3",
     "roboto-fontface": "*",
+    "swiper": "^4.4.2",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuetify": "^1.3.0",

src/App.vue

@@ -1,27 +1,65 @@
 <template>
-  <v-app>
-    <v-toolbar app>
-      <v-toolbar-title class="headline text-uppercase">
-        <span>GitHub</span>
-        <span class="font-weight-light">Notifier</span>
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-    </v-toolbar>
+    <v-app>
+        <v-toolbar app color="grey lighten-3">
+            <v-toolbar-title class="headline text-uppercase">
+                <span>GitHub</span>
+                <span class="font-weight-light">Notifier</span>
+            </v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
 
-    <v-content>
-      <router-view/>
-    </v-content>
-  </v-app>
+        <v-content>
+            <router-view/>
+            <v-bottom-nav
+                    color="primary"
+                    :value="true"
+                    app
+                    fixed
+                    shift
+            >
+                <v-btn dark>
+                    <span>Video</span>
+                    <v-icon>ondemand_video</v-icon>
+                </v-btn>
+
+                <v-btn dark>
+                    <span>Music</span>
+                    <v-icon>music_note</v-icon>
+                </v-btn>
+
+                <v-btn dark>
+                    <span>Book</span>
+                    <v-icon>book</v-icon>
+                </v-btn>
+
+                <v-btn dark>
+                    <span>Image</span>
+                    <v-icon>image</v-icon>
+                </v-btn>
+            </v-bottom-nav>
+        </v-content>
+    </v-app>
 </template>
 
 <script>
 
-export default {
-  name: 'App',
-  data () {
-    return {
-      //
+    export default {
+        name: 'App',
+        data() {
+            return {
+                //
+            }
+        },
+        created() {
+            this.$electron.ipcRenderer.on('logout', () => {
+                this.$router.push('/logout')
+            })
+        }
     }
-  }
-}
 </script>
+
+<style lang="scss">
+    .application{
+        background: #f5f5f5 !important;
+    }
+</style>

src/Http.js

@@ -12,7 +12,7 @@ if (token) {
 
 // Create axios instance
 let axiosInstance = axios.create({
-    baseURL: '',
+    baseURL: 'https://api.github.com/',
 });
 
 // Handle errors

src/components/Notifications.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <v-container>
+            <v-layout row wrap justify-center>
+                <v-flex sm10>
+                    <!-- swipe right section -->
+                    <v-card class="mb-5">
+                        <v-list class="pa-0">
+                            <template v-for="(item, index) in notifications">
+                                <SwipeoutItem
+                                        :title="item.subject.title"
+                                        :url="item.subject.url"
+                                        :repository="item.repository.full_name"
+                                        :type="item.subject.type"
+                                        :id="item.id"
+                                        :key="item.id"
+                                        @transitionEnd="transitionEnd(notifications, index)"
+                                />
+                                <!--<v-divider-->
+                                        <!--v-if="index + 1 < notifications.length"-->
+                                        <!--:key="`divider-${item.id}`"-->
+                                <!--/>-->
+
+                            </template>
+                        </v-list>
+                    </v-card>
+
+                </v-flex>
+            </v-layout>
+
+        </v-container>
+
+    </div>
+</template>
+
+<script>
+    import SwipeoutItem from '@/components/SwipeoutItem'
+    import NotificationsService from '@/services/NotificationsService'
+
+    export default {
+        name: "Notifications",
+        components: {
+            SwipeoutItem
+        },
+        data () {
+            return {
+                notifications: [],
+            }
+        },
+
+        created(){
+            NotificationsService.fetchAll().then(response =>{
+                console.log(response.data);
+                this.notifications = response.data;
+            }).catch(error=>{
+                console.log(error);
+            })
+        },
+
+        methods: {
+            transitionEnd (array, index) {
+                // Delete item from array after callback from SwipeoutItem
+                console.log('Delete item - ' + array[index].subject.title)
+                array.splice(index, 1)
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+</style>