docs: improve mobile design

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"
         />
 

docs/components/docs/DocsFooter.vue

@@ -7,8 +7,34 @@
       </NuxtLink>
     </div>
 
-    <NuxtLink to="https://github.com/nuxtlabs/ui/releases" target="_blank">
+    <div class="flex items-center gap-3 -my-1">
-      <UBadge label="v2.4.0" />
+      <div class="flex lg:hidden items-center gap-1.5">
-    </NuxtLink>
+        <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>

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: {