[#3380] Add menu button in docs navbar for mobile (#3383)

* fix(#3380): add options menu button for mobile view in Header component

* fix(#3380): reactivity links in landing Footer

* fix(#3380): styling AlgoliaSearch component

packages/docs/components/AlgoliaSearch.vue

@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import docsearch from '@docsearch/js'
 import { useI18n } from 'vue-i18n'
-import { onMounted, unref as _unref } from 'vue'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const { locale } = useI18n()
@@ -120,10 +120,12 @@ onMounted(() => {
   flex-grow: 1;
   display: flex;
 
+  @include xs(flex-grow, 0);
+
   .DocSearch-Button {
     margin-left: 0;
     flex-grow: 1;
-    max-width: 320px;
+    max-width: 20rem;
     border-radius: var(--va-input-border-radius);
     background-color: var(--va-background-element);
 
@@ -136,11 +138,10 @@ onMounted(() => {
   }
 
   .DocSearch-Button-Placeholder {
+    color: v-bind(placeholderColor);
+
     @include md(display, block);
     @include xs(display, none);
-
-    // TODO: This Vbind breaks build !
-    color: v-bind(placeholderColor);
   }
 
   .DocSearch-Button-Keys {
@@ -153,10 +154,6 @@ onMounted(() => {
       @include sm(color, var(--va-primary));
     }
   }
-
-  @media screen and (max-width: $break_xs) {
-    flex-grow: 0;
-  }
 }
 
 .DocSearch-Modal {

packages/docs/components/landing/Footer.vue

@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue'
+import { markRaw, computed } from 'vue'
 
 import { useElementTextColor, useBreakpoint } from 'vuestic-ui'
 
@@ -100,7 +100,7 @@ const buttons = [
   { href: 'https://github.com/epicmaxco/epic-spinners', icon: IconSpinnersRaw, label: 'landing.footer.buttons.spinners' },
 ]
 
-const sitemap = [
+const sitemap = computed(() => ([
   {
     title: 'landing.footer.sitemap.resources[0]',
     items: [
@@ -133,7 +133,7 @@ const sitemap = [
       { label: 'landing.footer.sitemap.about[3]', component: 'a', prop: 'href', value: 'mailto:[email protected]?subject=VuesticUI Partnership' },
     ]
   },
-]
+]))
 </script>
 
 <style lang="scss" scoped>