[#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>