header

components/Navbar.vue

 <template>
-  <div>
+  <!-- <div>
     <b-navbar toggleable="lg" type="dark" variant="info" style="background-color: #6f2ca6 !important">
       <SideBar />
 
-      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle> -->
 
-      <b-collapse id="nav-collapse" is-nav>
+      <!-- <b-collapse id="nav-collapse" is-nav>
         <b-navbar-nav>
           <b-nav-item href="/users">USER</b-nav-item>
           <b-nav-item href="/categories">CATEGORY</b-nav-item>
           <b-nav-item href="/products">PRODUCT</b-nav-item>
           <b-nav-item href="/posts">POST</b-nav-item>
-        </b-navbar-nav>
+        </b-navbar-nav> -->
 
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown right>
+        <!-- <b-navbar-nav class="ml-auto">
+          <b-nav-item-dropdown right> -->
             <!-- Using 'button-content' slot -->
-            <template #button-content>
+            <!-- <template #button-content>
               <em>{{ $auth.$storage.getUniversal("userName") }}</em>
             </template>
             <b-dropdown-item href="#">Profile</b-dropdown-item>
@@ -26,15 +26,49 @@
         </b-navbar-nav>
       </b-collapse>
     </b-navbar>
+  </div> -->
+
+  <div>
+    <v-toolbar
+      dark
+      prominent
+      src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
+    >
+      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+      <v-toolbar-title>
+        <v-btn href="/users">
+          <span>USER</span>
+          <v-icon>mdi-account</v-icon>
+        </v-btn>
+
+      <v-btn href="/categories">
+        <span>CATEGORY</span>
+        <v-icon>mdi-heart</v-icon>
+      </v-btn>
+
+      <v-btn href="/products">
+        <span>PRODUCT</span>
+        <v-icon> mdi-briefcase</v-icon>
+      </v-btn>
+
+      <v-btn href="/posts">
+        <span>POST</span>
+        <v-icon>mdi-newspaper</v-icon>
+      </v-btn>
+      </v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <v-btn icon @click="logout">
+        <v-icon>mdi-export</v-icon>
+      </v-btn>
+    </v-toolbar>
   </div>
 </template>
 <script>
-import SideBar from '@/components/SideBar'
 
 export default {
-  components: {
-    SideBar
-  },
   methods: {
     logout () {
       fetch('http://127.0.0.1:8000/api/logout', {

pages/categories/index.vue

@@ -246,7 +246,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -257,34 +261,37 @@ export default {
       const image = Array.from(set)
       const self = this
       this.$axios
-        .post('/categories/', {
+      .post('/categories/',
+        {
           name: this.name,
           ordering: this.ordering,
           parent_id: this.parent_id,
           images: image,
-        }, {
+        }, 
+        {
           headers: {
-            'Content-Type': 'multipart/form-data',
-            'Authorization': this.$auth.$storage.getUniversal('token')
-          }
-        })
-        .then(response => {
-          this.$bvModal.hide('modal-create')
-          self.$toast.success('Category created successfully!', {
-            duration: 3000
-          })
-          this.editedItem = response.data.data
-          console.log(this.editedItem)
-          this.categories.push(this.editedItem)
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        }
+      )
+      .then(response => {
+        this.$bvModal.hide('modal-create')
+        self.$toast.success('Category created successfully!', {
+          duration: 3000
         })
-        .catch(errors => {
-          this.$bvModal.hide('modal-create')
-          console.log(errors.response.data.message)
-          this.message = errors.response.data.message
-          self.$toast.error('something went wrong while trying create!', {
-            duration: 3000
-          })
+        this.editedItem = response.data.data
+        console.log(this.editedItem)
+        this.categories.push(this.editedItem)
+      })
+      .catch(errors => {
+        this.$bvModal.hide('modal-create')
+        console.log(errors.response.data.message)
+        this.message = errors.response.data.message
+        self.$toast.error('something went wrong while trying create!',{
+          duration: 3000
         })
+      })
     },
     fileSelected(event) {
       console.log(event)
@@ -297,20 +304,26 @@ export default {
     deleteCategory(ID, index) {
       const self = this
       this.editedIndex = this.categories.indexOf(index)
-      if (confirm('Do you really want to delete?')) {
-        try {
-          this.$axios
-            .delete(`/categories/${ID}`)
-            .then(response => {
-              this.categories.splice(this.editedIndex, 1)
-              self.$toast.success('Category deleted successfully!', {
-                duration: 3000
-              })
-            })
-        } catch (error) {
-          console.log(error)
-        }
+      if(confirm("Do you really want to delete?")){
+      try{
+      this.$axios
+        .delete(`/categories/${ID}`,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        })
+        .then(response => {
+          this.categories.splice(this.editedIndex, 1)
+          self.$toast.success('Category deleted successfully!',{
+        duration: 3000
+      })
+      })
+      } catch(error){
+        console.log(error)
       }
+    }
     },
     getID(item) {
       console.log(this.categories.indexOf(item))
@@ -333,29 +346,31 @@ export default {
       console.log(this.eName)
       console.log(this.eOrdering)
       console.log(this?.eID)
-      try {
-        this.$axios
-          .post(`categories/update/${this?.eID}`, {
+      try{
+      this.$axios
+        .post(`categories/update/${this?.eID}`,
+          {
             name: this.eName,
             ordering: this.eOrdering,
             parent_id: this.eParentId,
-            images: image
-          }, {
+            images: image }, 
+          {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              'Authorization': this.$auth.$storage.getUniversal('token')
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             }
-          })
-          .then(response => {
-            self.$toast.success('User updated successfully!', {
-              duration: 3000
-            })
-            console.log(response)
-            this.editedItem = response.data.data
-            this.$bvModal.hide('modal-edit')
-            Object.assign(this.categories[this.editedIndex], this.editedItem)
-          })
-      } catch (error) {
+          } 
+        )
+        .then(response => {
+        self.$toast.success('User updated successfully!',{
+        duration: 3000
+      })
+        console.log(response)
+        this.editedItem = response.data.data
+        this.$bvModal.hide('modal-edit')
+        Object.assign(this.categories[this.editedIndex], this.editedItem)
+      })
+      } catch(error){
         console.log(error)
       }
     }

pages/posts/index.vue

@@ -268,7 +268,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -276,7 +280,11 @@ export default {
     },
     getposts() {
       this.$axios
-        .get('/posts/')
+        .get("/posts/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.posts = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -296,8 +304,8 @@ export default {
           },
           {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              Authorization: this.$auth.$storage.getUniversal('token'),
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             },
           }
         )
@@ -324,7 +332,11 @@ export default {
       this.editedIndex = this.posts.indexOf(index)
       if (confirm('Do you really want to delete?')) {
         this.$axios
-          .delete(`/posts/${ID}`)
+          .delete(`/posts/${ID}`,{
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+            }})
           .then((response) => {
             this.posts.splice(this.editedIndex, 1)
             self.$toast.success('Post deleted successfully!', {
@@ -345,8 +357,8 @@ export default {
         const resp = await this.$axios.get(`/posts/${ID}`, {
           method: 'GET',
           headers: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: this.$auth.$storage.getUniversal('token'),
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
           },
         })
         console.log(resp.data)
@@ -386,8 +398,8 @@ export default {
           },
           {
             headers: {
-              'Content-Type': 'multipart/form-data',
-              Authorization: this.$auth.$storage.getUniversal('token'),
+              "Content-Type": "multipart/form-data",
+              Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
             },
           }
         )

pages/products/index.vue

@@ -481,7 +481,11 @@ export default {
     },
     getCategories() {
       this.$axios
-        .get('/categories/')
+        .get("/categories/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.categories = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -489,7 +493,11 @@ export default {
     },
     getProducts() {
       this.$axios
-        .get('/products/')
+        .get("/products/",{
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
         .then((response) => (this.products = response.data.data))
         .catch(function (error) {
           console.log(error)
@@ -510,7 +518,7 @@ export default {
       }, {
         headers: {
           'Content-Type': 'multipart/form-data',
-          'Authorization': this.$auth.$storage.getUniversal('token')
+          Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
         }
       })
       .then(response => {
@@ -537,7 +545,11 @@ export default {
       if(confirm('Do you really want to delete?')){
       try{
         this.$axios
-          .delete(`/products/${ID}`)
+          .delete(`/products/${ID}`,{
+            headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }})
           .then(response => {
             this.products.splice(this.editedIndex, 1)
             self.$toast.success('Category deleted successfully!',{
@@ -555,8 +567,8 @@ export default {
         const resp = await this.$axios.get(`/products/${ID}`, {
           method: 'GET',
           headers: {
-            'Content-Type': 'multipart/form-data',
-            Authorization: this.$auth.$storage.getUniversal('token'),
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
           },
         })
         this.sName = resp.data.data.name
@@ -594,11 +606,12 @@ export default {
             images: this.eImages,
             variants: this.eVariants,
           }, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          'Authorization': this.$auth.$storage.getUniversal('token')
+          headers: {
+            "Content-Type": "multipart/form-data",
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          }
         }
-      } )
+      )
         .then(response => {
         self.$toast.success('User updated successfully!',{
         duration: 3000

pages/register.vue

-<template>
+<!-- <template>
   <div style="background-color: #8fc2ff">
     <div class="container" style="
         display: flex;
@@ -57,7 +57,7 @@ export default {
           confirm_password: this.confirm_password,
         }),
       })
-      this.$router.push('/')
+      this.$router.push("/login")
     },
   },
 }
@@ -81,4 +81,4 @@ export default {
   justify-content: center;
   margin-left: 50px;
 }
-</style>
+</style> -->

pages/users/index.vue

@@ -228,7 +228,12 @@ export default {
     },
     getUsers() {
       this.$axios
-        .get('/users/')
+        .get('/users/',{
+        headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+        },
+        })
         .then((response) => (this.users = response.data.data.data))
         .catch(function (error) {
           console.log(error)
@@ -237,53 +242,63 @@ export default {
     createUser() {
       const self = this
       this.$axios
-        .post('/users/', {
-          headers: {
-            'Content-Type': 'application/json'
-          },
+      .post('/users/',
+        {
           email: this.email,
           password: this.password,
-          name: this.name,
-        })
-        .then(response => {
-          // $bvModal.hide('modal-login')
-          this.$bvModal.hide('modal-login')
-          self.$toast.success('User created successfully!', {
-            duration: 3000
-          })
-          console.log(response)
-          this.editedItem = response.data.data
-          console.log(this.editedItem)
-          this.users.push(this.editedItem)
-        })
-        .catch(errors => {
-          this.$bvModal.hide('modal-login')
-          console.log(errors.response.data.message)
-          this.message = errors.response.data.message
-          self.$toast.error('something went wrong while trying create!', {
-            duration: 3000
-          })
-        })
+          name:this.name,
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        }
+        )
+      .then(response => {
+        // $bvModal.hide('modal-login');
+        this.$bvModal.hide('modal-login')
+        self.$toast.success('User created successfully!',{
+        duration: 3000
+      })
+        console.log(response)
+        this.editedItem = response.data.data
+        console.log(this.editedItem)
+        this.users.push(this.editedItem)
+      })
+      .catch(errors => {
+        this.$bvModal.hide('modal-login')
+        console.log(errors.response.data.message)
+        this.message = errors.response.data.message
+        self.$toast.error('something went wrong while trying create!',{
+        duration: 3000
+      })
+        })     
     },
     deleteUser(userID, index) {
       const self = this
       this.editedIndex = this.users.indexOf(index)
-      if (confirm('Do you really want to delete?')) {
-        try {
-          this.$axios
-            .delete(`/users/${userID}`)
-            .then(response => {
-              console.log(response.data)
-              this.users.splice(this.editedIndex, 1)
-              self.$toast.success('User deleted successfully!', {
-                duration: 3000
-              })
-            })
-        } catch (error) {
-          console.log(error)
-        }
+      if(confirm("Do you really want to delete?")){
+      try{
+      this.$axios
+        .delete(`/users/${userID}`,{
+        headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+        },
+        })
+        .then(response => {
+          console.log(response.data)
+          this.users.splice(this.editedIndex, 1)
+          self.$toast.success('User deleted successfully!',{
+        duration: 3000
+      })
+      })
+      } catch(error){
+        console.log(error)
       }
-    },
+    }
+    },   
     editUser(user) {
       this.$bvModal.show('modal-edit')
       this.eID = user.id
@@ -297,23 +312,31 @@ export default {
       console.log(this.eName)
       console.log(this.eEmail)
       console.log(this?.eID)
-      try {
-        this.$axios
-          .put(`/users/${this?.eID}`, {
-            email: this.eEmail,
-            password: this.ePassword,
-            name: this.eName,
-          })
-          .then(response => {
-            self.$toast.success('User updated successfully!', {
-              duration: 3000
-            })
-            console.log(response)
-            this.editedItem = response.data.data
-            this.$bvModal.hide('modal-edit')
-            Object.assign(this.users[this.editedIndex], this.editedItem)
-          })
-      } catch (error) {
+      try{
+      this.$axios
+        .put(`/users/${this?.eID}`,
+        {
+          email: this.eEmail,
+          password: this.ePassword,
+          name:this.eName,
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal("token")}`,
+          },
+        } 
+      )
+        .then(response => {
+        self.$toast.success('User updated successfully!',{
+        duration: 3000
+      })
+        console.log(response)
+        this.editedItem = response.data.data
+        this.$bvModal.hide('modal-edit')
+        Object.assign(this.users[this.editedIndex], this.editedItem)
+      })
+      } catch(error){
         console.log(error)
       }
     }