From a2d75f55728954f560d5d0d7731e132c567145b7 Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Sat, 13 Jun 2020 14:58:22 +0200
Subject: [PATCH] Fix categories links

---
 src/App.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b52c28b..562099a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,11 +8,13 @@
             </div>
 
             <div class="max-w-2xl mx-auto mt-4">
-                <span class="ml-2" v-for="route in routes" :key="route.path">
-                    <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm  cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
-                        {{ route.name }}
-                    </router-link>
-                </span>
+                <div class="flex flex-wrap items-center justify-center">
+                    <span class="ml-2" v-for="route in routes" :key="route.path">
+                        <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm  cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
+                            {{ route.name }}
+                        </router-link>
+                    </span>
+                </div>
 
                 <p class="mt-8 text-gray-700 text-center">Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline">configuration</a></p>
             </div>