Implement pagination properly

resources/js/components/BlogRecent.vue

@@ -25,7 +25,7 @@
             </ul>
 
             <pagination
-                v-if="paginate"
+                v-if="paginate && !loading"
                 v-model:page="page"
                 v-model:itemsPerPage="itemsPerPage"
                 :max-pages="lastPage"
@@ -88,6 +88,7 @@ export default {
             this.$router.push({ name: 'blog-article', params: { year, month, day, id, slug }});
         },
         updateList(limit, page) {
+            this.loading = true;
             axios.get("/api/blog/recent", {
                 params: {
                     limit: limit,

resources/js/components/Pagination.vue

@@ -1,9 +1,11 @@
 <template>
-    <button @click="gotoPage(0)">First</button>
+    <div class="pagination">
-    <button @click="gotoPage(page - 1)">Previous</button>
+        <button @click="gotoPage(0)">First</button>
-    <span>{{ page + 1 }} / {{ maxPages }}</span>
+        <button @click="gotoPage(page - 1)">Previous</button>
-    <button @click="gotoPage(page + 1)">Next</button>
+        <button class="unselectable">{{ page + 1 }} / {{ maxPages }}</button>
-    <button @click="gotoPage(maxPages)">Last</button>
+        <button @click="gotoPage(page + 1)">Next</button>
+        <button @click="gotoPage(maxPages)">Last</button>
+    </div>
 </template>
 
 <script>

resources/scss/_pagination.scss

@@ -0,0 +1,37 @@
+.pagination {
+    display: flex;
+    justify-content: flex-start;
+
+    button {
+        background-color: #1c2d35;
+        border: 1px solid white;
+        color: white;
+
+        height: 40px;
+        width: 120px;
+        padding: .5rem;
+        flex-grow: 1;
+    }
+
+    button:not(.unselectable) {
+        cursor: pointer;
+    }
+
+    button:not(.unselectable):hover {
+        background-color: #2d3e46;
+    }
+
+    button:not(:last-child) {
+        border-right: none;
+    }
+
+    button:first-child {
+        border-top-left-radius: 15px;
+        border-bottom-left-radius: 15px;
+    }
+
+    button:last-child {
+        border-top-right-radius: 15px;
+        border-bottom-right-radius: 15px;
+    }
+}

resources/scss/app.scss

@@ -16,3 +16,4 @@
 @import "blog";
 @import "footer";
 @import "home";
+@import "pagination";