first commit [WIP]

.eslintignore

@@ -0,0 +1 @@
+/src

src/App.vue

@@ -1,28 +1,33 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <SideBar/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+  import { helpers } from './assets/customMixins.js';
+import SideBar from './components/SideBar.vue'
 
 export default {
+  mixins: [helpers],
   name: 'app',
   components: {
-    HelloWorld
+    SideBar
+  },
+  data() {
+    return {
+      allProjects: null
+    }
+  },
+  created() {
+    this.allProjects = this.fetchData('https://api.qatouch.com/api/v1/getAllProjects', this.config);
+  },
+  methods: {
+
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>

src/assets/customMixins.js

@@ -0,0 +1,38 @@
+import axios from 'axios';
+export const helpers = {
+
+    created (){
+
+    },
+    data: function () {
+        return {
+            config : {
+                headers: {
+                    'api-token': "73d8e663e9750d3a5410c8e2a113220f5ae88c203a2a9847b23e40c4c075feae",
+                    'domain' : 'malar'
+                }
+            }
+        }
+    },
+    methods : {
+        fetchData(_url, _config) {
+            let data = null;
+            // Make a request for a user with a given ID
+            let x = axios.get('https://api.qatouch.com/api/v1/getAllProjects/',_config)
+                .then(function (response) {
+                    // handle success
+                    console.log('asdf');
+                    return response['data']['data'];
+                })
+                .catch(function (error) {
+                    // handle error
+                    console.log(error);
+                })
+                .finally(function () {
+                    // always executed
+                });
+            console.log(x);
+        }
+    }
+
+};

src/components/SideBar.vue

@@ -0,0 +1,72 @@
+<template>
+
+  <div class="sidenav">
+    <h3 class="title">{{ this.pageName }}</h3>
+    <div class="title separator"></div>
+
+    <div v-for="allProject in allProjects">
+      <div class="project-name">{{ allProject.project_name}}</div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  import { helpers } from '../assets/customMixins.js';
+export default {
+  mixins: [helpers],
+  name: 'HelloWorld',
+  props: {
+    pageName: String,
+    allProjects: Array
+  },
+  data: function () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+
+  .sidenav {
+    height: 100%;
+    width: 160px;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: darkgrey;
+    overflow-x: hidden;
+    /*padding-top: 20px;*/
+    padding: 16px 8px 8px 16px;
+  }
+
+  .sidenav a {
+    padding: 6px 8px 6px 16px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+  }
+
+  .sidenav a:hover {
+    color: #f1f1f1;
+  }
+
+  .project-name{
+    margin: 8px;
+  }
+
+  .title{
+    margin: 8px;
+  }
+
+  .separator{
+    height: 2px;
+    background-color: #111111;
+  }
+</style>

src/test.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "test.vue",
+        data() {
+
+        },
+        created() {
+        },
+        mounted() {
+        },
+        methods() {
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>