Implement the composite search bar in the mobile search header

Address the code review requests for changes

Address the code review requests for changes

src/components/VHeader/VHeaderDesktop.vue

@@ -7,7 +7,7 @@
         : 'border-white'
     "
   >
-    <VLogoButton :is-fetching="isFetching" :is-search-route="true" />
+    <VLogoButton :is-fetching="isFetching" />
 
     <VSearchBar
       v-model.trim="searchTerm"

src/components/VHeader/VHeaderMobile/VBackButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <VButton
+    size="disabled"
+    class="icon-button flex h-12 w-12 flex-shrink-0 rotate-90 items-center justify-center bg-tx active:shadow-ring"
+    variant="plain--avoid"
+    :aria-label="$t('header.back-button')"
+    @click="$emit('click')"
+  >
+    <span
+      class="flex h-8 w-8 items-center justify-center rounded-sm bg-dark-charcoal-10"
+    >
+      <VIcon
+        class="bg-red pointer-events-none rounded-sm bg-dark-charcoal-10"
+        :icon-path="caretDownIcon"
+      />
+    </span>
+  </VButton>
+</template>
+
+<script lang="ts">
+import { defineEvent } from '~/types/emits'
+
+import VButton from '~/components/VButton.vue'
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import caretDownIcon from '~/assets/icons/caret-down.svg'
+
+export default {
+  name: 'VBackButton',
+  components: { VButton, VIcon },
+  emits: {
+    click: defineEvent(),
+  },
+  setup() {
+    return {
+      caretDownIcon,
+    }
+  },
+}
+</script>

src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue

@@ -0,0 +1,45 @@
+<template>
+  <VModal
+    :label="$t('header.aria.menu').toString()"
+    variant="search"
+    :hide-on-esc="true"
+  >
+    <template #trigger="{ visible, a11Props }">
+      <VContentSettingsButton
+        ref="contentSettingsButtonRef"
+        :is-pressed="visible"
+        v-bind="a11Props"
+        class="me-2"
+      />
+    </template>
+    <template #default>
+      <nav
+        id="content-switcher-modal"
+        class="p-6"
+        aria-labelledby="content-switcher-heading"
+      >
+        <VSearchTypes
+          ref="searchTypesRef"
+          active-item="image"
+          size="small"
+          :use-links="true"
+        />
+      </nav>
+    </template>
+  </VModal>
+</template>
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api'
+
+import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton.vue'
+import VModal from '~/components/VModal/VModal.vue'
+import VSearchTypes from '~/components/VContentSwitcher/VSearchTypes.vue'
+
+/**
+ * This is a temporary stub component that needs to be replaced with the actual ContentSettingsModal
+ */
+export default defineComponent({
+  name: 'VContentSettingsModal',
+  components: { VContentSettingsButton, VModal, VSearchTypes },
+})
+</script>