Implement the composite search bar for the mobile search header

src/components/VButton.vue

@@ -2,7 +2,7 @@
   <Component
     :is="as"
     :type="typeRef"
-    class="flex appearance-none items-center justify-center rounded-sm no-underline ring-offset-1 transition-shadow duration-100 ease-linear focus:outline-none"
+    class="group flex appearance-none items-center justify-center rounded-sm no-underline ring-offset-1 transition-shadow duration-100 ease-linear focus:outline-none"
     :class="[
       $style.button,
       $style[variant],

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/VHeaderInternal.vue

@@ -93,7 +93,7 @@ export default defineComponent({
   name: 'VHeaderInternal',
   components: { VHomeLink, VIconButton, VLink, VModal, VPageLinks, WordPress },
   setup() {
-    const menuButtonRef = ref<InstanceType<typeof VIconButton>>(null)
+    const menuButtonRef = ref<InstanceType<typeof VIconButton> | null>(null)
 
     const { all: allPages, current: currentPage } = usePages(true)
     const route = useRoute()

src/components/VHeader/VHeaderMobile/VContentSettingsButton.vue

@@ -1,36 +1,32 @@
 <template>
-  <span class="relative inline-block h-8 w-8">
-    <VIconButton
-      size="new-small"
-      :icon-props="{ iconPath: sourceIcon }"
-      :button-props="{ variant: 'menu' }"
-      :aria-label="
-        areFiltersSelected
-          ? $t('header.aria.menu-notification')
-          : $t('header.aria.menu')
-      "
-      aria-haspopup="dialog"
-      :aria-expanded="isPressed"
-      aria-controls="content-settings-modal"
-      @click="$emit('click')"
-    />
-    <span
-      v-if="areFiltersSelected"
-      class="absolute top-[-2px] right-[-2px] h-[8px] w-[8px] rounded bg-pink"
-    />
-  </span>
+  <VSearchBarButton
+    :icon-path="sourceIcon"
+    :aria-label="
+      areFiltersSelected
+        ? $t('header.aria.menu-notification')
+        : $t('header.aria.menu')
+    "
+    aria-haspopup="dialog"
+    :aria-expanded="isPressed"
+    aria-controls="content-settings-modal"
+    inner-area-classes="bg-white hover:bg-dark-charcoal hover:text-white"
+  >
+    <template #notification>
+      <span
+        v-if="areFiltersSelected"
+        class="absolute top-[-2px] right-[-2px] h-[8px] w-[8px] rounded bg-pink"
+      />
+    </template>
+  </VSearchBarButton>
 </template>
-
 <script lang="ts">
-import { defineEvent } from '~/types/emits'
-
-import VIconButton from '~/components/VIconButton/VIconButton.vue'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
 
 import sourceIcon from '~/assets/icons/source.svg'
 
 export default {
   name: 'VContentSettingsButton',
-  components: { VIconButton },
+  components: { VSearchBarButton },
   props: {
     isPressed: {
       type: Boolean,
@@ -41,12 +37,9 @@ export default {
       default: false,
     },
   },
-  emits: {
-    click: defineEvent(),
-  },
   setup() {
     return {
-      sourceIcon,
+      sourceIcon: sourceIcon as unknown as string,
     }
   },
 }

src/components/VHeader/VHeaderMobile/VContentSettingsModal.vue

@@ -9,8 +9,8 @@
     <template #trigger="{ visible, a11Props }">
       <VContentSettingsButton
         :is-pressed="visible"
+        :are-filters-selected="areFiltersSelected"
         v-bind="a11Props"
-        class="me-2"
       />
     </template>
     <VTabs
@@ -111,6 +111,9 @@ export default defineComponent({
     const changeSelectedTab = (tab: 'content-settings' | 'filters') => {
       selectedTab.value = tab
     }
+
+    const areFiltersSelected = computed(() => searchStore.isAnyFilterApplied)
+
     const showClearFiltersButton = computed(
       () => selectedTab.value === 'filters'
     )
@@ -141,6 +144,7 @@ export default defineComponent({
       selectedTab,
       changeSelectedTab,
 
+      areFiltersSelected,
       showClearFiltersButton,
       isClearButtonDisabled,
       clearFiltersLabel,