feat: updates and fix

src/App.vue

@@ -1,20 +1,14 @@
 <template>
     <div class="app">
-        <Tailwind />
-        <router-view></router-view>
+       <router-view></router-view>
     </div>
 </template>
 
 <script>
-import TodayTask from './components/TodayTask.vue';
-import Tailwind from './components/tailwind.vue';
+
 
 export default {
     name: 'app',
-    components: {
-        Tailwind,
-        TodayTask,
-    },
 };
 </script>
 

src/components/SideBar.vue

@@ -0,0 +1,29 @@
+<template>
+    <div id="app" class="bg-gray-600 h-full">
+        <router-link to="/" class="block text-white px-6 py-6" :class="{'bg-gray-800': $route.name == 'today'}">
+            <span>Today</span>
+        </router-link>
+        <router-link to="/upcoming" class="block text-white px-6 py-6" :class="{'bg-gray-800': $route.name == 'tomorrow'}">
+            <span>Upcoming</span>
+        </router-link>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SideBar',
+    data() {
+        return {
+            open: true,
+            dimmer: true,
+        };
+    },
+    methods: {
+        toggle() {
+            this.open = !this.open;
+        },
+    },
+};
+</script>
+
+<style></style>

src/components/TodayTask.vue → src/components/TaskView.vue

@@ -2,7 +2,7 @@
     <div class="task bg-gray-100 h-full">
         <div class="show-task"><i class="fas fa-plus plus-icon"></i><span>Show Task</span></div>
         <h2>
-            <span class="text-lg font-bold">Today,</span> <span class="text-sm">{{ new Date() | moment('dddd MMMM Do') }}</span>
+            <span class="text-lg font-bold">{{ this.period }},</span> <span class="text-sm">{{ new Date() | moment('dddd MMMM Do') }}</span>
         </h2>
 
         <div class="todo-wrapper">
@@ -22,7 +22,12 @@ import {Button, RichText} from '@e9ine/vue_components';
 import axios from 'axios';
 
 export default {
-    name: 'TodayTask',
+    name: 'TaskView',
+    props:{
+        period:{
+            type: String
+        }
+    },
     components: {
         Button,
         RichText,
@@ -40,8 +45,8 @@ export default {
         };
     },
 
-    async created() {
-        this.apiData = await this.fetchTasks();
+    async mounted() {
+        await this.fetchTasks();
     },
 
     methods: {
@@ -50,7 +55,7 @@ export default {
                 alert('Fill the form');
                 return;
             }
-            await axios.post('https://api.airtable.com/v0/apphZGgDhpEPZGSgI/today?api_key=keyb5bZMwjL3cHJ3q', {
+            await axios.post(`https://api.airtable.com/v0/apphZGgDhpEPZGSgI/${this.period}?api_key=keyb5bZMwjL3cHJ3q`, {
                 fields: {
                     task: this.options.content,
                 },
@@ -62,17 +67,22 @@ export default {
         },
 
         async fetchTasks() {
-            const res = await axios.get('https://api.airtable.com/v0/apphZGgDhpEPZGSgI/today?api_key=keyb5bZMwjL3cHJ3q');
+            const res = await axios.get(`https://api.airtable.com/v0/apphZGgDhpEPZGSgI/${this.period}?api_key=keyb5bZMwjL3cHJ3q`);
             const data = res.data.records.map(record => {
                 return record.fields.task;
             });
-            return data;
+            this.apiData = data;
         },
         delteTask(task, index) {
             alert('confirm delete...');
             this.apiData.splice(this.apiData.indexOf(task), 1);
         },
     },
+    watch:{
+        async period(){
+            await this.fetchTasks();
+        }
+    }
 };
 </script>
 

src/routes.js

@@ -1,8 +1,7 @@
 import Vue from "vue";
 import VueRouter from 'vue-router'
+import ToDoView from '@/views/ToDoView';
 
-import Upcoming from './views/Upcoming'
-import TodayTask from './components/TodayTask'
 
 Vue.use(VueRouter)
 
@@ -11,11 +10,15 @@ export const router = new VueRouter({
     routes: [
         {
             path:'/',
-            component: TodayTask
+            name:'today',
+            component: ToDoView,
+
         },
         {
             path:'/upcoming',
-            component: Upcoming
+            name:'tomorrow',
+            component: ToDoView,
+
         }
     ]
 })

src/views/ToDoView.vue

@@ -0,0 +1,28 @@
+
+<template>
+    <div class="app flex">
+        <div class="w-2/12">
+            <SideBar/>
+        </div>
+
+        <div class="flex-grow">
+            <TaskView :period="$route.name"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import TaskView from '@/components/TaskView.vue';
+import SideBar from '@/components/SideBar.vue';
+
+export default {
+    name: 'ToDoView',
+    components: {
+        SideBar,
+        TaskView,
+    },
+    created(){
+
+    }
+};
+</script>