improve page navigation buttons

docs/src/components/PageNavigation/index.vue

@@ -1,35 +1,33 @@
 <template>
-  <nav class="page-navigation">
+  <btn-wrapper class="page-navigation">
-    <div class="page-navigation__previous">
+    <btn
-      <btn
+      type="secondary"
-        type="secondary"
+      icon="arrow-left"
-        icon="arrow-left"
+      icon-position="before"
-        icon-position="before"
+      :to="previousPage.link"
-        :to="previousPage.link"
+      v-if="previousPage"
-        v-if="previousPage"
+    >
-      >
+      {{ previousPage.title }}
-        {{ previousPage.title }}
+    </btn>
-      </btn>
+    <btn
-    </div>
+      type="secondary"
-    <div class="page-navigation__next">
+      icon="arrow-right"
-      <btn
+      :to="nextPage.redirect || nextPage.link"
-        type="secondary"
+      v-if="nextPage"
-        icon="arrow-right"
+    >
-        :to="nextPage.redirect || nextPage.link"
+      {{ nextPage.title }}
-        v-if="nextPage"
+    </btn>
-      >
+  </btn-wrapper>
-        {{ nextPage.title }}
-      </btn>
-    </div>
-  </nav>
 </template>
 
 <script>
 import linkGroups from '@/links.yaml'
+import BtnWrapper from '~/components/BtnWrapper'
 import Btn from '~/components/Btn'
 
 export default {
   components: {
+    BtnWrapper,
     Btn,
   },
 

docs/src/components/PageNavigation/style.scss

@@ -1,4 +1,3 @@
 .page-navigation {
-  display: flex;
   justify-content: space-between;
 }