From e4233718a6b55a2a5aa98224da4e9aa609b7ff5d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 29 Jun 2023 18:01:21 +0200
Subject: [PATCH] docs: improve mobile design

---
 docs/components/HeaderLinks.vue     |  2 ++
 docs/components/docs/DocsFooter.vue | 32 ++++++++++++++++++++++++++---
 docs/nuxt.config.ts                 |  6 ++++++
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/docs/components/HeaderLinks.vue b/docs/components/HeaderLinks.vue
index 42751152..54a68894 100644
--- a/docs/components/HeaderLinks.vue
+++ b/docs/components/HeaderLinks.vue
@@ -33,6 +33,7 @@
           target="_blank"
           color="gray"
           variant="ghost"
+          class="hidden lg:inline-flex"
           icon="i-simple-icons-twitter"
         />
 
@@ -41,6 +42,7 @@
           target="_blank"
           color="gray"
           variant="ghost"
+          class="hidden lg:inline-flex"
           icon="i-simple-icons-github"
         />
 
diff --git a/docs/components/docs/DocsFooter.vue b/docs/components/docs/DocsFooter.vue
index ef10af93..16583bb0 100644
--- a/docs/components/docs/DocsFooter.vue
+++ b/docs/components/docs/DocsFooter.vue
@@ -7,8 +7,34 @@
       </NuxtLink>
     </div>
 
-    <NuxtLink to="https://github.com/nuxtlabs/ui/releases" target="_blank">
-      <UBadge label="v2.4.0" />
-    </NuxtLink>
+    <div class="flex items-center gap-3 -my-1">
+      <div class="flex lg:hidden items-center gap-1.5">
+        <UButton
+          to="https://twitter.com/nuxtlabs"
+          target="_blank"
+          color="gray"
+          size="2xs"
+          variant="ghost"
+          icon="i-simple-icons-twitter"
+        />
+
+        <UButton
+          to="https://github.com/nuxtlabs/ui"
+          target="_blank"
+          color="gray"
+          size="2xs"
+          variant="ghost"
+          icon="i-simple-icons-github"
+        />
+      </div>
+
+      <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank">
+        <UBadge :label="`v${config.version}`" />
+      </NuxtLink>
+    </div>
   </footer>
 </template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig().public
+</script>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index a61bd677..31f46af3 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -1,6 +1,7 @@
 import ui from '../src/module'
 import { excludeColors } from '../src/colors'
 import colors from 'tailwindcss/colors'
+import pkg from '../package.json'
 
 export default defineNuxtConfig({
   // @ts-ignore
@@ -14,6 +15,11 @@ export default defineNuxtConfig({
     'nuxt-lodash',
     'nuxt-component-meta'
   ],
+  runtimeConfig: {
+    public: {
+      version: pkg.version
+    }
+  },
   content: {
     highlight: {
       theme: {